Для создания кастомного календаря на JavaScript необходимо реализовать несколько шагов. Рассмотрим пример такой реализации:
Шаг 1: Создание HTML разметки
Сначала создадим HTML разметку для календаря. Мы будем использовать <div>
элементы для отображения дней и стрелки для навигации между месяцами.
<div id="calendar"></div>
Шаг 2: Определение функции для создания календаря
Наш календарь будет базироваться на JavaScript классе, который будет иметь методы для отображения текущего месяца и навигации между месяцами.
class Calendar { constructor(selector) { this.element = document.querySelector(selector); this.date = new Date(); } render() { // Отображение текущего месяца в календаре } // Навигация между месяцами nextMonth() { this.date.setMonth(this.date.getMonth() + 1); this.render(); } prevMonth() { this.date.setMonth(this.date.getMonth() - 1); this.render(); } }
Шаг 3: Отображение текущего месяца
Для отображения текущего месяца мы сначала создадим таблицу с днями месяца, а затем добавим ее в наш элемент календаря.
render() { const days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']; const month = this.date.getMonth(); const year = this.date.getFullYear(); // Создание заголовка таблицы с днями недели let html = '<table><tr>'; for (let day of days) { html += `<th>${day}</th>`; } html += '</tr>'; // Получение первого дня и последнего дня месяца const firstDay = new Date(year, month, 1).getDay(); const lastDate = new Date(year, month + 1, 0).getDate(); // Создание ячеек таблицы с датами let date = 1; for (let i = 0; i < 6; i++) { html += '<tr>'; for (let j = 0; j < 7; j++) { if (i === 0 && j < firstDay) { html += '<td></td>'; } else if (date > lastDate) { html += '<td></td>'; } else { html += `<td>${date}</td>`; date++; } } html += '</tr>'; } html += '</table>'; this.element.innerHTML = html; }
Шаг 4: Добавление обработчиков событий для навигации между месяцами
Наш календарь будет реагировать на щелчки по стрелкам влево и вправо, чтобы переключать между месяцами.
const calendar = new Calendar('#calendar'); // Добавление обработчиков событий для навигации между месяцами document.getElementById('prev').addEventListener('click', () => { calendar.prevMonth(); }); document.getElementById('next').addEventListener('click', () => { calendar.nextMonth(); });
Шаг 5: Стилизация календаря
Наконец, мы можем добавить стили для календаря, чтобы он выглядел более привлекательно.
table { border-collapse: collapse; } th, td { padding: 10px; text-align: center; border: 1px solid black; } button { margin: 10px; }
Теперь, если вы добавите <div id="prev">
и <div id="next">
в вашей разметке, и примените стили из CSS, то у вас появится кастомный календарь на вашей странице.
Надеюсь, что данное руководство поможет вам создать свой собственный кастомный календарь на JavaScript. Это лишь базовый пример, и вы можете расширить его и добавить необходимые функции и возможности, чтобы создать более сложный и функциональный календарь.