Содержание
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.
License
andrey-tech/calendar-js
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
Класс Calendar. Формирует НTML-код календаря на год или на месяц с версткой CSS Grid Layout.
- Требования
- Класс Calendar
- Методы класса
- Дополнительные параметры
- HTML-представление дней календаря
- Примеры
- Календарь на текущий год
- Календарь на заданный год
- Календарь на текущий месяц текущего года
- Календарь на заданный месяц заданного года
- HTML-код страницы календаря
- Формируемый HTML-код календаря на месяц
- jQuery
- Веб-браузер, поддерживающий спецификацию CSS Grid Layout (level 1):
- Google Chrome >= 57
- Mozilla Firefox >= 52
- Apple Safari >= 10.1
- Microsoft Edge >= 16
- Opera >= 68
- construct(fullYear) Конструктор класса.
- fullYear — четырёхзначный номер года (например, 2021).
Если номер года не передан, то будет использован текущий год.
- month — номер месяца (например, 1); нумерация месяцев начинается с нуля (0 — январь, 11 — декабрь).
Если номер месяца не передан, то будет использован текущий месяц.
Дополнительные параметры работы устанавливаются через свойства объекта класса Calendar .
Свойство По умолчанию Описание showYearTitle false Включает отображение заголовка года showMonthTitle true Включает отображение заголовка месяца showMonthTitleYear true Включает отображение номера года в заголовке месяца showNextPrevDays true Включает отображение дат из последующего и предыдущего месяца в календаре текущего месяца HTML-представление дней календаря
Для каждого дня месяца в HTML-коде календаря устанавливаются следующие HTML-атрибуты data-* :
- data-day — день месяца (1-31);
- data-month — номер месяца (0-11). Нумерация месяцев начинается с нуля (0 — январь, 11 — декабрь);
- data-year — четырёхзначный номер года;
- data-wday — номер дня недели (0-6). Нумерация дней недели начинается с нуля (0 — понедельник, 6 — воскресенье);
- data-iso-date — дата в формате ISO 8601 (2020-06-28).
Для каждого дня месяца в HTML-коде календаря могут быть установлены CSS-классы со следущими именами, характеризующими данный день месяца:
- current — день текущего месяца;
- previous — день предыдущего месяца;
- next — день следующего месяца;
- today — сегодняшний день;
- holiday — выходной день (суббота или воскресенье).
div data-day pl-s">6" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-06-06" class pl-s">current holiday"> div class pl-s">day-number">6div> div>
$(() => let calendar = new Calendar(); // Включаем отображение заголовка года calendar.showYearTitle = true; // Выключаем отображение номера года в заголовке месяца calendar.showMonthTitleYear = false; // Выключаем отображение дат из последующего и предыдущего месяца в текущем месяце calendar.showNextPrevDays = false; // Получам календарь на текущий год let $year = calendar.getYearHTML(); // Выводим календарь $('body').append($year); >);
Календарь на заданный год
$(() => let calendar = new Calendar(2020); // Получам календарь на 2020 год let $year = calendar.getYearHTML(); // Выводим календарь $('body').append($year); >);
Календарь на текущий месяц текущего года
$(() => let calendar = new Calendar(); // Получам календарь на текущий месяц текущего года let $month = calendar.getMonthHTML(); // Выводим календарь $('body').append($month); >);
Календарь на заданный месяц заданного года
$(() => let calendar = new Calendar(2020); // Получам календарь на июнь месяц 2020-го года let $month = calendar.getMonthHTML(5); // Выводим календарь $('body').append($month); >);
HTML-код страницы календаря
> html lang pl-s">ru"> head> meta charset pl-s">utf-8"> meta name pl-s">viewport" content pl-s">width=device-width, initial-scale=1"> title>Calendar exampletitle> link rel pl-s">stylesheet" href pl-s">./js/calendar.css"> script src pl-s">https://code.jquery.com/jquery-3.3.1.min.js">script> script src pl-s">./js/calendar.js?v=3.1.0">script> script> $(() => let calendar = new Calendar(), $year = calendar.getYearHTML(), $month = calendar.getMonthHTML(); $('body').append($year, $month); >); script> head> body> body> html>
Формируемый HTML-код календаря на месяц
div class pl-s">neuro-calendar-month-wrapper"> div class pl-s">neuro-calendar-month-title">Июнь 2020div> div class pl-s">neuro-calendar-month"> div class pl-s">wday">Пнdiv> div class pl-s">wday">Втdiv> div class pl-s">wday">Срdiv> div class pl-s">wday">Чтdiv> div class pl-s">wday">Птdiv> div class pl-s">wday">Сбdiv> div class pl-s">wday">Всdiv> div data-day pl-s">1" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">1" data-iso-date pl-s">2020-06-01" class pl-s">current"> div class pl-s">day-number">1div> div> div data-day pl-s">2" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">2" data-iso-date pl-s">2020-06-02" class pl-s">current"> div class pl-s">day-number">2div> div> div data-day pl-s">3" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">3" data-iso-date pl-s">2020-06-03" class pl-s">current"> div class pl-s">day-number">3div> div> div data-day pl-s">4" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">4" data-iso-date pl-s">2020-06-04" class pl-s">current"> div class pl-s">day-number">4div> div> div data-day pl-s">5" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">5" data-iso-date pl-s">2020-06-05" class pl-s">current"> div class pl-s">day-number">5div> div> div data-day pl-s">6" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-06-06" class pl-s">current holiday"> div class pl-s">day-number">6div> div> div data-day pl-s">7" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">0" data-iso-date pl-s">2020-06-07" class pl-s">current holiday"> div class pl-s">day-number">7div> div> div data-day pl-s">8" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">1" data-iso-date pl-s">2020-06-08" class pl-s">current"> div class pl-s">day-number">8div> div> div data-day pl-s">9" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">2" data-iso-date pl-s">2020-06-09" class pl-s">current"> div class pl-s">day-number">9div> div> div data-day pl-s">10" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">3" data-iso-date pl-s">2020-06-10" class pl-s">current"> div class pl-s">day-number">10div> div> div data-day pl-s">11" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">4" data-iso-date pl-s">2020-06-11" class pl-s">current"> div class pl-s">day-number">11div> div> div data-day pl-s">12" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">5" data-iso-date pl-s">2020-06-12" class pl-s">current"> div class pl-s">day-number">12div> div> div data-day pl-s">13" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-06-13" class pl-s">current holiday"> div class pl-s">day-number">13div> div> div data-day pl-s">14" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">0" data-iso-date pl-s">2020-06-14" class pl-s">current holiday"> div class pl-s">day-number">14div> div> div data-day pl-s">15" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">1" data-iso-date pl-s">2020-06-15" class pl-s">current"> div class pl-s">day-number">15div> div> div data-day pl-s">16" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">2" data-iso-date pl-s">2020-06-16" class pl-s">current today"> div class pl-s">day-number">16div> div> div data-day pl-s">17" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">3" data-iso-date pl-s">2020-06-17" class pl-s">current"> div class pl-s">day-number">17div> div> div data-day pl-s">18" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">4" data-iso-date pl-s">2020-06-18" class pl-s">current"> div class pl-s">day-number">18div> div> div data-day pl-s">19" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">5" data-iso-date pl-s">2020-06-19" class pl-s">current"> div class pl-s">day-number">19div> div> div data-day pl-s">20" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-06-20" class pl-s">current holiday"> div class pl-s">day-number">20div> div> div data-day pl-s">21" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">0" data-iso-date pl-s">2020-06-21" class pl-s">current holiday"> div class pl-s">day-number">21div> div> div data-day pl-s">22" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">1" data-iso-date pl-s">2020-06-22" class pl-s">current"> div class pl-s">day-number">22div> div> div data-day pl-s">23" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">2" data-iso-date pl-s">2020-06-23" class pl-s">current"> div class pl-s">day-number">23div> div> div data-day pl-s">24" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">3" data-iso-date pl-s">2020-06-24" class pl-s">current"> div class pl-s">day-number">24div> div> div data-day pl-s">25" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">4" data-iso-date pl-s">2020-06-25" class pl-s">current"> div class pl-s">day-number">25div> div> div data-day pl-s">26" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">5" data-iso-date pl-s">2020-06-26" class pl-s">current"> div class pl-s">day-number">26div> div> div data-day pl-s">27" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-06-27" class pl-s">current holiday"> div class pl-s">day-number">27div> div> div data-day pl-s">28" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">0" data-iso-date pl-s">2020-06-28" class pl-s">current holiday"> div class pl-s">day-number">28div> div> div data-day pl-s">29" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">1" data-iso-date pl-s">2020-06-29" class pl-s">current"> div class pl-s">day-number">29div> div> div data-day pl-s">30" data-month pl-s">5" data-year pl-s">2020" data-wday pl-s">2" data-iso-date pl-s">2020-06-30" class pl-s">current"> div class pl-s">day-number">30div> div> div class pl-s">next" data-day pl-s">1" data-month pl-s">6" data-year pl-s">2020" data-wday pl-s">3" data-iso-date pl-s">2020-07-01"> div class pl-s">day-number">1div> div> div class pl-s">next" data-day pl-s">2" data-month pl-s">6" data-year pl-s">2020" data-wday pl-s">4" data-iso-date pl-s">2020-07-02"> div class pl-s">day-number">2div> div> div class pl-s">next" data-day pl-s">3" data-month pl-s">6" data-year pl-s">2020" data-wday pl-s">5" data-iso-date pl-s">2020-07-03"> div class pl-s">day-number">3div> div> div class pl-s">next holiday" data-day pl-s">4" data-month pl-s">6" data-year pl-s">2020" data-wday pl-s">6" data-iso-date pl-s">2020-07-04"> div class pl-s">day-number">4div> div> div class pl-s">next holiday" data-day pl-s">5" data-month pl-s">6" data-year pl-s">2020" data-wday pl-s">0" data-iso-date pl-s">2020-07-05"> div class pl-s">day-number">5div> div> div> div>
- fullYear — четырёхзначный номер года (например, 2021).