Скрипт для html календарь

doctor Brain

При создании различных веб-сервисов работа с датами и временем практически всегда занимает весомое место. Создание календаря — достаточно простая задача, которая, тем не менее, часто вызывает затруднения в реализации у начинающих разработчиков.

Сегодня мы создадим виджет простого месячного календаря, отвечающий следующим условиям:

1. по умолчанию загружается текущий месяц,
2. текущая дата выделяется,
3. возможно смещение по календарю на месяц вперед или назад.

HTML

Создадим контейнер обертку month-calendar, в котором разместим три блока:

1. month: содержит наименования месяца и года, а также элементы навигации,
2. weekdays: наименования дней недели,
3. days: собственно, сам календарь (табличная часть, содержит дни месяца).

Так выглядит html-разметка основных блоков календаря:

Обратите внимание: несмотря на визуальную реализацию виджета в виде таблицы, для каждого из вышеперечисленных дочерних элементов контейнера month-calendar мы используем немаркированный список ul . Соответственно, в дальнейшем мы будем манипулировать элементами списков li .

А вот и финальная верстка:

В данном случае для элементов навигации нужно подключить библиотеку Font Awesome (Web Font или SVG версию).

CSS

В основе позиционирования элементов календаря находится модель flexbox.

* < box-sizing: border-box; >body < font-family: sans-serif; >/* месяцы и годы */ #month-calendar < width: 100%; >.month < margin: 0; padding: 3rem 2rem 2rem; background: #555555; text-align: center; width: 100%; color: #ffffff; list-style: none; >.month li < padding: 0; margin: 0; font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 700; >.month li.prev, .month li.next < cursor: pointer; >.month li.prev < float: left; >.month li.next < float: right; >.month li.year-name < font-size: 1.2rem; font-weight: 400; >/* дни недели */ .weekdays < margin: 0; padding: 1rem 0; background-color: #dddddd; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: left; >.weekdays li < display: inline-block; flex: 0 0 calc(100% / 7); text-align: center; >/* дни */ .days < margin: 0; padding: 1rem 0; background-color: #eeeeee; width: 100%; display: flex; flex-wrap: wrap; justify-content: left; align-content: flex-start; height: 14rem; >.days li < padding: 0.5rem; list-style: none; display: inline-block; flex: 0 0 calc(100% / 7); text-align: center; color: #999; font-size: 0.9rem; line-height: 1rem; >.days li.date-now

1. ширина контейнера month-calendar равна 100%: width: 100% ,
2. для элементов навигации prev и next используются свойства float: left и float-right ,
3. блок days имеет фиксированную высоту height: 14rem , что позволяет избежать смещения или наложения элементов при динамической смене данных виджета,
4. для табличной части календаря элементы li располагаются слева направо и сверху вниз: горизонтальное выравнивание — justify-content: left , вертикальное — align-content: flex-start ,
5. в одном ряду табличной части находится семь элементов, это достигается за счет использования выражения calc: flex: 0 0 calc(100% / 7) ,
6. для исключения влияния размеров отсутпов на расчетные значения для всех элементов установлено свойство box-sizing: border-box .

JS

Основу работы виджета составляют свойства и методы встроенного объекта Date.

Экземпляр объекта Date

создать новый экземпляр объекта Date можно только через конструктор:

let nowDate = new Date(); // создаем экземпляра объекта с текущей датой let curDate = new Date(year,month,day); // создаем экземпляр объекта для определенной календарной даты; 

Вызов Date() как функции (без new) вернет не экземпляр объекта, а строку.

Как получить год, месяц, дату?

Чтобы получить год, месяц, дату экземпляра объетка Date, обратимся к встроенным методам:

nowDate.getFullYear(); // возвращает год в четырехзначном формате nowDate.getMonth(); // возвращает номер месяца (значение от 0 до 11. Январь равен 0) nowDate.getDate(); // возвращает текущую дату 

Как получить название месяца?

Чтобы получить назавние месяца воспользуемся массивом:

let arrMonthName = ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь']; let monthName = arrMonthName[NowDate.getMonth()]; // получаем название месяца 

Как получить текущий день недели?

Для определения текущего дня недели тоже существует встроенная функция:

nowDate.getDay() // возвращает номер дня недели 

Обратие внимание: отсчет дней недели идет с воскресенья, которое равно 0.

Как получить количество дней в месяце?

Существует небольшая хитрость, основанная на способности методов объекта Date автоматически пересчитывать параметры, приводя их к корректному значению. Так, если мы установим дату экземпляра объекта равной 0, метод getDate() вернет дату последнего дня предыдущего месяца, то есть полученное значение будет равнятся количеству дней в предыдущем месяце:

monthDays = new Date(year, month + 1, 0).getDate(); // возвращает количество дней в выбранном месяце 

Как получить количество дней недели до начала текущего месяца.

Если неделя стартует с воскресенья, для определения количества дней недели до начала текущего месяца достаточно получить номер первого дня текущего месяца:

new Date(year,month,1).getDay() // возвращает номер дня недели 

В случае, когда неделя начинается с понедельника, нужно получит номер последнего дня недели предыдущего месяца:

new Date(year,month,0).getDay() // возвращает номер дня недели 

Как корректно сместить дату на месяц назад или вперед?

Мы опять обращаемся к способности методов объекта Date автоматически корректировать дату:

curDate.setMonth(curDate.getMonth() + 1); // смещает дату на месяц вперед curDate.setMonth(curDate.getMonth() - 1); // смещает дату на месяц назад 

Итоговый JS-файл

Опираясь на данные, полученные выше создадим итоговый код JavaScript:

Результат

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник

Скрипт для html календарь

Этот виджет календаря не требует внешних библиотек, поскольку он написан исключительно на 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 = ''; // Запись выбранного месяца и года html += ''; html += ''; html += ''; // заголовок дней недели html += ''; > html += ''; // Записываем дни var i=1; do < var dow = new Date(y, m, i).getDay(); // Начать новую строку в понедельник if ( dow == 1 ) < html += ''; > // Если первый день недели не понедельник показать последние дни предыдущего месяца else if ( i == 1 ) < html += ''; var k = lastDayOfLastMonth - firstDayOfMonth+1; for(var j=0; j < firstDayOfMonth; j++) < html += ''; > // Если последний день месяца не воскресенье, показать первые дни следующего месяца else if ( i == lastDateOfMonth ) < var k=1; for(dow; dow < 7; dow++) < html += '
' + this.Months[m] + ' ' + y + '
'; 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, чтобы убрать весь внешний код. Это никак не повлияет на функционал. Оформление можно сделать любым на усмотрение, а функционал календаря расширить, добавив собственные функции на ваше усмотрение.
 
Источник
 
   
 
Оцените статью
 
 
 
 
 
     
    
Вам также может понравиться
 
 
Ящики с усами python
pandas.plotting.boxplot# Make a box-and-whisker plot
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
 
Пример использования свойства CSS table-layout.
HTML Размеры таблицы HTML таблицы могут иметь разные
 
 
 
Пример использования свойства CSS table-layout.
table-layout¶ Свойство table-layout определяет, как
 
 
   
 
 
 
Правообладателям
 
Политика конфиденциальности
 
Контакты