Создание простого календаря с использованием HTML, CSS и JavaScript

При разработке веб-сервисов часто возникает необходимость работы с датами и временем. Одной из распространенных задач является создание календаря. Несмотря на кажущуюся простоту, реализация календаря может вызывать трудности у начинающих разработчиков.

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

Отображать текущий месяц по умолчанию
Выделять текущую дату
Предоставлять возможность переключения между месяцами

Содержание

Структура календаря
Стилизация с использованием CSS
Логика с использованием JavaScript
Результат

Структура календаря

Для начала создадим основную HTML-разметку календаря, состоящую из трех основных блоков:

month: отображает название месяца, год и элементы навигации
weekdays: содержит названия дней недели
days: отображает дни месяца

<div id="month-calendar">
<ul class="month">
<li class="prev"><i class="fas fa-angle-double-left"></i></li>
<li class="next"><i class="fas fa-angle-double-right"></i></li>
<li class="month-name"></li>
<li class="year-name"></li>
</ul>
<ul class="weekdays">
<li>Пн</li>
<li>Вт</li>
<li>Ср</li>
<li>Чт</li>
<li>Пт</li>
<li>Сб</li>
<li>Вс</li>
</ul>
<ul class="days">
<!-- Дни месяца будут добавлены динамически -->
</ul>
</div>

Для элементов навигации (стрелки) мы используем библиотеку Font Awesome.

Стилизация с использованием CSS

Для стилизации календаря мы используем 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;
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;
display: flex;
justify-content: space-around;
}

.weekdays li {
flex: 1;
text-align: center;
}

.days {
margin: 0;
padding: 1rem 0;
background-color: #eeeeee;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
height: 14rem;
}

.days li {
padding: 0.5rem;
list-style: none;
flex: 1;
text-align: center;
color: #999;
font-size: 0.9rem;
line-height: 1rem;
}

.days li.date-now {
color: #000;
font-weight: 700;
}

Обратите внимание на использование Flexbox для управления элементами и обеспечением адаптивности календаря.

Логика с использованием JavaScript

Теперь добавим JavaScript для управления отображением дат и навигацией по месяцам.

let nowDate = new Date(),
nowDateNumber = nowDate.getDate(),
nowMonth = nowDate.getMonth(),
nowYear = nowDate.getFullYear(),
container = document.getElementById('month-calendar'),
monthContainer = container.getElementsByClassName('month-name')[0],
yearContainer = container.getElementsByClassName('year-name')[0],
daysContainer = container.getElementsByClassName('days')[0],
prev = container.getElementsByClassName('prev')[0],
next = container.getElementsByClassName('next')[0],
monthName = ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'];

function setMonthCalendar(year, month) {
let monthDays = new Date(year, month + 1, 0).getDate(),
monthPrefix = new Date(year, month, 0).getDay(),
monthDaysText = '';

monthContainer.textContent = monthName[month];
yearContainer.textContent = year;
daysContainer.innerHTML = '';

if (monthPrefix > 0) {
for (let i = 1; i <= monthPrefix; i++) {
monthDaysText += '<li></li>';
}
}

for (let i = 1; i <= monthDays; i++) {
monthDaysText += `<li>${i}</li>`;
}

daysContainer.innerHTML = monthDaysText;

if (month == nowMonth && year == nowYear) {
let days = daysContainer.getElementsByTagName('li');
days[monthPrefix + nowDateNumber - 1].classList.add('date-now');
}
}

setMonthCalendar(nowYear, nowMonth);

prev.onclick = function () {
let curDate = new Date(yearContainer.textContent, monthName.indexOf(monthContainer.textContent));

curDate.setMonth(curDate.getMonth() - 1);

setMonthCalendar(curDate.getFullYear(), curDate.getMonth());
}

next.onclick = function () {
let curDate = new Date(yearContainer.textContent, monthName.indexOf(monthContainer.textContent));

curDate.setMonth(curDate.getMonth() + 1);

setMonthCalendar(curDate.getFullYear(), curDate.getMonth());
}

Этот код создает календарь, который отображает дни месяца, выделяет текущую дату и позволяет переключаться между месяцами. Мы используем объект Date для получения текущих даты и времени, а также для вычисления количества дней в месяце и определения дня недели.

Результат

Теперь у вас есть простой и функциональный виджет календаря, который можно легко интегрировать в веб-сайт. Этот календарь удобен для пользователей и предоставляет основные функции, необходимые для работы с датами.