How TO — CSS Calendar
class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).
The element with class=»close» should be used to close the modal.
Step 2) Add CSS:
Example
/* Month header */
.month padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
>
/* Month list */
.month ul margin: 0;
padding: 0;
>
.month ul li color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
>
/* Previous button inside month header */
.month .prev float: left;
padding-top: 10px;
>
/* Next button */
.month .next float: right;
padding-top: 10px;
>
/* Weekdays (Mon-Sun) */
.weekdays margin: 0;
padding: 10px 0;
background-color:#ddd;
>
.weekdays li display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
>
/* Days (1-31) */
.days padding: 10px 0;
background: #eee;
margin: 0;
>
.days li list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
>
/* Highlight the «current» day */
.days li .active padding: 5px;
background: #1abc9c;
color: white !important
>
Css как вставить календарь
Этот виджет календаря не требует внешних библиотек, поскольку он написан исключительно на JavaScript, CSS и HTML. Из внешних источников используется только Font Awesome CSS для клавиш навигации, но при желании их тоже можно заменить на собственные.
Структура HTML
В HTML загрузите Reset CSS , чтобы очистить форматирование HTML-элементов в браузере по умолчанию. Аналогичным образом загрузите Font Awesome CSS для значков, добавив следующие ссылки CDN в тег заголовка вашей веб-страницы.
Нам нужен элемент div , в котором календарь будет отображаться динамически. Создайте элемент div с именем класса calendar-wrapper , разместите кнопки смены месяца «следующий/предыдущий» и элемент div с идентификатором divCal .
Не забудьте добавить ссылку на будущий файл .js , где будет основной функционал.
Вы можете разместить приведенную выше HTML-структуру в любом месте вашей веб-страницы/приложения, где вы хотите создать виджет календаря.
Создание стилей CSS
После создания оболочки в HTML пришло время настроить макет календаря. Выберите класс calendar-wrapper и определите его ширину, поля, отступы и свойства границы следующим образом. Вы можете установить собственный цвет фона по вашему выбору.
Функция календаря генерирует даты, расположенные в виде таблицы. Таким образом, вы можете легко настроить макет календаря, выбрав элемент таблицы. Ниже приведены стили по умолчанию, вы можете изменить их в соответствии с вашими потребностями.
Класс not-current для элемента td указывает отключенные даты в календаре. Если вы хотите скрыть эти даты, вы можете использовать свойство видимости CSS со «скрытым» значением.
Если вы хотите настроить текущую дату, вы можете выбрать today класс и определить для него стили CSS.
В календаре используется значок Font Awesome внутри кнопок. Эти кнопки навигации по календарю можно настроить, выбрав их по идентификатору. Вы можете установить собственный цвет фона, размер шрифта и значок для этих кнопок в соответствии с вашими потребностями.
#btnPrev < float: left; margin-bottom: 20px; >#btnPrev:before < content: '\f104'; font-family: FontAwesome; padding-right: 4px; >#btnNext < float: right; margin-bottom: 20px; >#btnNext:after < content: '\f105'; font-family: FontAwesome; padding-left: 4px; >#btnPrev, #btnNext
Также вы можете определить стиль наведения для кнопок «следующая/предыдущая».
#btnPrev:hover, #btnNext:hover
Добавляем JavaScript
На этом этапе мы можем перейти к главному и добавить функцию JavaScript календаря в свой проект перед закрытием тега body .
var Cal = function(divId) < //Сохраняем идентификатор div this.divId = divId; // Дни недели с понедельника this.DaysOfWeek = [ 'Пн', 'Вт', 'Ср', 'Чтв', 'Птн', 'Суб', 'Вск' ]; // Месяцы начиная с января this.Months =['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; //Устанавливаем текущий месяц, год var d = new Date(); this.currMonth = d.getMonth(); this.currYear = d.getFullYear(); this.currDay = d.getDate(); >; // Переход к следующему месяцу Cal.prototype.nextMonth = function() < if ( this.currMonth == 11 ) < this.currMonth = 0; this.currYear = this.currYear + 1; >else < this.currMonth = this.currMonth + 1; >this.showcurr(); >; // Переход к предыдущему месяцу Cal.prototype.previousMonth = function() < if ( this.currMonth == 0 ) < this.currMonth = 11; this.currYear = this.currYear - 1; >else < this.currMonth = this.currMonth - 1; >this.showcurr(); >; // Показать текущий месяц Cal.prototype.showcurr = function() < this.showMonth(this.currYear, this.currMonth); >; // Показать месяц (год, месяц) Cal.prototype.showMonth = function(y, m) < var d = new Date() // Первый день недели в выбранном месяце , firstDayOfMonth = new Date(y, m, 7).getDay() // Последний день выбранного месяца , lastDateOfMonth = new Date(y, m+1, 0).getDate() // Последний день предыдущего месяца , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate(); var html = '
| ' + this.Months[m] + ' ' + y + ' | '; html += '||||||
| '; k++; > > // Записываем текущий день в цикл var chk = new Date(); var chkY = chk.getFullYear(); var chkM = chk.getMonth(); if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) < html += ' | '; > else < html += ' | '; > // закрыть строку в воскресенье if ( dow == 0 ) < html += ' | '; k++; > > i++; >while(i '; // Записываем HTML в div document.getElementById(this.divId).innerHTML = html; >; // При загрузке окна window.onload = function() < // Начать календарь var c = new Cal("divCal"); c.showcurr(); // Привязываем кнопки «Следующий» и «Предыдущий» getId('btnNext').onclick = function() < c.nextMonth(); >; getId('btnPrev').onclick = function() < c.previousMonth(); >; > // Получить элемент по id function getId(id) Если вам нужно добавить больше функциональности, вы можете соответствующим образом изменить код. Назначение каждой переменной, объекта и функции прокомментировано, поэтому вы можете легко понять, что делает функция календаря. ЗаключениеНу вот мы наконец и перевернули наш календарь. Это довольно простой, но в то же время гибкий пример использования JS в веб-разработке. Виджет написан на чистом JS. При желании вы даже можете исключить из него Font Awesome CSS, чтобы убрать весь внешний код. Это никак не повлияет на функционал. Оформление можно сделать любым на усмотрение, а функционал календаря расширить, добавив собственные функции на ваше усмотрение. How To Create Calendar Using HTML, CSS & Javascript?Dear Coders! In this lesson, we’ll use HTML, CSS, and JavaScript to build our Own Calendar. Every day, we consult a calendar to confirm the day and date. Can you, however, conceive of a way we could create our own calendar using HTML, CSS, and JavaScript? Using HTML, CSS, and JavaScript, we will learn how to make our own calendar in this article today.
Do you want to learn HTML to JavaScript? 🔥 If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code. This project is simple enough for beginners to comprehend right away if they simply read the article. You will have an understanding of how to use javascript to add style to our structure and calendar concept. Simply copy the code into your IDE if you want to save time. We advise you to create separate files for HTML, CSS, and Javascript. Javascript is the main component of our calendar project. Let’s now begin to structure our calendar. Step1: Adding Some Basic HTML.HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilizing this markup language. So let’s look at our HTML code. We have used minimum HTML code to add the basic structure to our calendar. First of all, we have added the external file link to our head section in order to add styling to our project. The styling for our calendar will be added utilizing the div block level tag that we have now introduced. Even when viewing the project output, you will only see a blank page without any styling, thus we have inserted some placeholder text to make it clearer to you that we have added structure to our webpage.
Now we added a basic structure to our webpage. Now using the CSS will be adding our main style to our webpage. Step2: Adding CSS@import url(«https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected];200;300;400;500;600;700&display=swap»); :root < --calendar-bg-color: #262829; --calendar-font-color: #fff; --weekdays-border-bottom-color: #404040; --calendar-date-hover-color: #505050; --calendar-current-date-color: #1b1f21; --calendar-today-color: linear-gradient(to bottom, #03a9f4, #2196f3); --calendar-today-innerborder-color: transparent; --calendar-nextprev-bg-color: transparent; --next-prev-arrow-color: #fff; --calendar-border-radius: 16px; --calendar-prevnext-date-color: #484848; >* < padding: 0; margin: 0; >.calendar < font-family: "IBM Plex Sans", sans-serif; position: relative; max-width: 400px; /*change as per your design need */ min-width: 320px; background: var(--calendar-bg-color); color: var(--calendar-font-color); margin: 20px auto; box-sizing: border-box; overflow: hidden; font-weight: normal; border-radius: var(--calendar-border-radius); >.calendar-inner < padding: 10px 10px; >.calendar .calendar-inner .calendar-body < display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; >.calendar .calendar-inner .calendar-body div < padding: 4px; min-height: 30px; line-height: 30px; border: 1px solid transparent; margin: 10px 2px 0px; >.calendar .calendar-inner .calendar-body div:nth-child(-n + 7) < border: 1px solid transparent; border-bottom: 1px solid var(--weekdays-border-bottom-color); >.calendar .calendar-inner .calendar-body div:nth-child(-n + 7):hover < border: 1px solid transparent; border-bottom: 1px solid var(--weekdays-border-bottom-color); >.calendar .calendar-inner .calendar-body div > a < color: var(--calendar-font-color); text-decoration: none; display: flex; justify-content: center; >.calendar .calendar-inner .calendar-body div:hover < border: 1px solid var(--calendar-date-hover-color); border-radius: 4px; >.calendar .calendar-inner .calendar-body div.empty-dates:hover < border: 1px solid transparent; >.calendar .calendar-inner .calendar-controls < display: grid; grid-template-columns: repeat(3, 1fr); >.calendar .calendar-inner .calendar-today-date < display: grid; text-align: center; cursor: pointer; margin: 3px 0px; background: var(--calendar-current-date-color); padding: 8px 0px; border-radius: 10px; width: 80%; margin: auto; >.calendar .calendar-inner .calendar-controls .calendar-year-month < display: flex; min-width: 100px; justify-content: space-evenly; align-items: center; >.calendar .calendar-inner .calendar-controls .calendar-next < text-align: right; >.calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-year-label, .calendar .calendar-inner .calendar-controls .calendar-year-month .calendar-month-label < font-weight: 500; font-size: 20px; >.calendar .calendar-inner .calendar-body .calendar-today < background: var(--calendar-today-color); border-radius: 4px; >.calendar .calendar-inner .calendar-body .calendar-today:hover < border: 1px solid transparent; >.calendar .calendar-inner .calendar-body .calendar-today a < outline: 2px solid var(--calendar-today-innerborder-color); >.calendar .calendar-inner .calendar-controls .calendar-next a, .calendar .calendar-inner .calendar-controls .calendar-prev a < color: var(--calendar-font-color); font-family: arial, consolas, sans-serif; font-size: 26px; text-decoration: none; padding: 4px 12px; display: inline-block; background: var(--calendar-nextprev-bg-color); margin: 10px 0 10px 0; >.calendar .calendar-inner .calendar-controls .calendar-next a svg, .calendar .calendar-inner .calendar-controls .calendar-prev a svg < height: 20px; width: 20px; >.calendar .calendar-inner .calendar-controls .calendar-next a svg path, .calendar .calendar-inner .calendar-controls .calendar-prev a svg path < fill: var(--next-prev-arrow-color); >.calendar .calendar-inner .calendar-body .prev-dates, .calendar .calendar-inner .calendar-body .next-dates < color: var(--calendar-prevnext-date-color); >.calendar .calendar-inner .calendar-body .prev-dates:hover, .calendar .calendar-inner .calendar-body .next-dates:hover We’ll utilize some simple CSS code. It will be simple for you to understand and attempt to incorporate your style, which will assist you to clarify your concepts. The CSS will be explained step by step. Step1: First, we’ll import some Google Fonts using some Google Font Links so that we may use them later to give our project some flair. Now using the root selector we will be defining some styling to our root element so that we can inherit our style from the root selector. Step2: Now we will add padding and margin as “zero” to our element using the universal (*) selector. | |||
