NoteJS/public/calendar.js

// Календарь
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();
});