// Календарь class Calendar { constructor() { this.currentDate = new Date(); this.selectedDate = new Date(); this.today = new Date(); this.init(); } init() { this.calendarTitle = document.getElementById("calendarTitle"); this.calendarDays = document.getElementById("calendarDays"); this.prevMonthBtn = document.getElementById("prevMonth"); this.nextMonthBtn = document.getElementById("nextMonth"); this.prevMonthBtn.addEventListener("click", () => this.previousMonth()); this.nextMonthBtn.addEventListener("click", () => this.nextMonth()); this.render(); } previousMonth() { this.currentDate.setMonth(this.currentDate.getMonth() - 1); this.render(); } nextMonth() { this.currentDate.setMonth(this.currentDate.getMonth() + 1); this.render(); } render() { this.renderTitle(); this.renderDays(); } renderTitle() { const monthNames = [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь", ]; const month = monthNames[this.currentDate.getMonth()]; const year = this.currentDate.getFullYear(); this.calendarTitle.textContent = `${month} ${year}`; } renderDays() { this.calendarDays.innerHTML = ""; // Первый день месяца const firstDay = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth(), 1 ); // Последний день месяца const lastDay = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0 ); // Число дней в месяце const daysInMonth = lastDay.getDate(); // День недели, на который выпадает 1-е число месяца (0 - понедельник в нашей системе) let startingDayOfWeek = firstDay.getDay() - 1; // Преобразуем так, чтобы понедельник был 0 if (startingDayOfWeek === -1) startingDayOfWeek = 6; // Воскресенье = 6 // Добавляем дни из предыдущего месяца const prevLastDay = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth(), 0 ).getDate(); for (let i = startingDayOfWeek - 1; i >= 0; i--) { const dayDiv = document.createElement("div"); dayDiv.classList.add("calendar-day", "other-month"); dayDiv.textContent = prevLastDay - i; this.calendarDays.appendChild(dayDiv); } // Добавляем дни текущего месяца for (let day = 1; day <= daysInMonth; day++) { const dayDiv = document.createElement("div"); dayDiv.classList.add("calendar-day"); dayDiv.textContent = day; const currentCellDate = new Date( this.currentDate.getFullYear(), this.currentDate.getMonth(), day ); // Проверяем, сегодняшний ли это день if (this.isToday(currentCellDate)) { dayDiv.classList.add("today"); } // Проверяем, выбранный ли это день if (this.isSelected(currentCellDate)) { dayDiv.classList.add("selected"); } // Добавляем обработчик клика dayDiv.addEventListener("click", () => this.selectDate(currentCellDate)); this.calendarDays.appendChild(dayDiv); } // Добавляем дни из следующего месяца const totalCells = this.calendarDays.children.length; const remainingCells = 42 - totalCells; // 6 строк * 7 дней = 42 for (let day = 1; day <= remainingCells; day++) { const dayDiv = document.createElement("div"); dayDiv.classList.add("calendar-day", "other-month"); dayDiv.textContent = day; this.calendarDays.appendChild(dayDiv); } } isToday(date) { return ( date.getDate() === this.today.getDate() && date.getMonth() === this.today.getMonth() && date.getFullYear() === this.today.getFullYear() ); } isSelected(date) { return ( date.getDate() === this.selectedDate.getDate() && date.getMonth() === this.selectedDate.getMonth() && date.getFullYear() === this.selectedDate.getFullYear() ); } selectDate(date) { this.selectedDate = new Date(date); this.render(); // Вы можете добавить дополнительную логику здесь, например, фильтрацию заметок по дате console.log("Выбрана дата:", this.formatDate(date)); } formatDate(date) { const day = String(date.getDate()).padStart(2, "0"); const month = String(date.getMonth() + 1).padStart(2, "0"); const year = date.getFullYear(); return `${day}.${month}.${year}`; } } // Инициализируем календарь при загрузке страницы document.addEventListener("DOMContentLoaded", function () { new Calendar(); });