Делаем красивый календарь на HTML и CSS: несколько примеров
В этой статье мы покажем, как создать красивые календари на HTML и CSS. Это простой, но интересный проект, который поможет улучшить дизайн вашего веб-приложения или сайта. Мы рассмотрим несколько способов создания календаря и предоставим примеры.
C помощью таблицы
Для начала давайте создадим простой календарь с помощью таблицы. Этот способ очень простой, и вам не потребуется особых знаний программирования.
Как сделать календарь в html и css
Самый простой и быстрый способ как вывести готовый календарь на странице, является применение тега input с аттрибутом date . Давайте посмотрим на его возможности.
type="date"> Такой вариант создает поле на странице как на рисунке ниже, при нажатии на mm/dd/yyyy можно будет отредактировать значения, а при нажатии на иконку календаря — выбрать нужное.
type="date" value="2023-01-01"> Здесь мы дополнительно передаем значение которое сразу будет установлено в виде текущего. Это может быть удобно в некоторых случаях.
type="date" value="2022-05-05" min="2022-01-01" max="2022-12-31"> Тут мы задаем диапазон значение из которых можно выбрать дату, например чтобы пользователь не смог ошибиться при выборе даты. Как видно на примере ниже, выбрать месяц из 2021 года нет возможности
Как сделать — Календарь
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.
Шаг 2) Добавить CSS:
Пример
/* Заголовок месяца */
.month padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
>
/* Список месяцев */
.month ul margin: 0;
padding: 0;
>
.month ul li color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
>
/* Назад кнопка внутри заголовка месяца */
.month .prev float: left;
padding-top: 10px;
>
/* Вперед кнопка */
.month .next float: right;
padding-top: 10px;
>
/* Будни (Пн-Вс) */
.weekdays margin: 0;
padding: 10px 0;
background-color:#ddd;
>
.weekdays li display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
>
/* Дни (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;
>
/* Выделите «текущий» день */
.days li .active padding: 5px;
background: #1abc9c;
color: white !important
>
Как сделать календарь html
Этот виджет календаря не требует внешних библиотек, поскольку он написан исключительно на JavaScript, CSS и HTML. Из внешних источников используется только Font Awesome CSS для клавиш навигации, но при желании их тоже можно заменить на собственные.
Ссылка на полный код в Codepen https://codepen.io/sergejkravchen2/pen/abVqxGv
Структура HTML
В HTML загрузите Reset CSS , чтобы очистить форматирование HTML-элементов в браузере по умолчанию. Аналогичным образом загрузите Font Awesome CSS для значков, добавив следующие ссылки CDN в тег заголовка вашей веб-страницы.
Нам нужен элемент div , в котором календарь будет отображаться динамически. Создайте элемент div с именем класса calendar-wrapper , разместите кнопки смены месяца «следующий/предыдущий» и элемент div с идентификатором divCal .
ПредыдущийНе забудьте добавить ссылку на будущий файл .js , где будет основной функционал.
Вы можете разместить приведенную выше HTML-структуру в любом месте вашей веб-страницы/приложения, где вы хотите создать виджет календаря.
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»Создание стилей CSS
После создания оболочки в HTML пришло время настроить макет календаря. Выберите класс calendar-wrapper и определите его ширину, поля, отступы и свойства границы следующим образом. Вы можете установить собственный цвет фона по вашему выбору.
.calendar-wrapperФункция календаря генерирует даты, расположенные в виде таблицы. Таким образом, вы можете легко настроить макет календаря, выбрав элемент таблицы. Ниже приведены стили по умолчанию, вы можете изменить их в соответствии с вашими потребностями.
table < clear: both; width: 100%; border: 1px solid #dcdcff; border-radius: 3px; border-collapse: collapse; color: #444; >td < height: 48px; text-align: center; vertical-align: middle; border-right: 1px solid #dcdcff; border-top: 1px solid #dcdcff; width: 14.28571429%; >thead tdКласс not-current для элемента td указывает отключенные даты в календаре. Если вы хотите скрыть эти даты, вы можете использовать свойство видимости CSS со «скрытым» значением.
td.not-currentЕсли вы хотите настроить текущую дату, вы можете выбрать today класс и определить для него стили CSS.
td.todayВ календаре используется значок 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, чтобы убрать весь внешний код. Это никак не повлияет на функционал. Оформление можно сделать любым на усмотрение, а функционал календаря расширить, добавив собственные функции на ваше усмотрение. Ссылка на полный код в codepen https://codepen.io/sergejkravchen2/pen/abVqxGv
| |||