Функция календаря в NoteJS

Описание

Добавлена новая функция интерактивного календаря на странице заметок. Календарь расположен слева от формы создания заметок и обеспечивает удобную навигацию по датам.

Что было добавлено

1. HTML разметка (`public/notes.html`)

Новый контейнер main-wrapper для двухколонного макета
Боковая панель calendar-sidebar с календарём
Элементы для отображения дней месяца, навигации между месяцами
Дни недели на русском языке (Пн, Вт, Ср, Чт, Пт, Сб, Вс)

2. Стили CSS (`public/style.css`)

Стили для двухколонного макета с использованием flexbox
Красивое оформление календаря:
- Сегодняшний день: синий цвет (класс today)
- Выбранный день: зелёный цвет (класс selected)
- Дни соседних месяцев: серый цвет (класс other-month)
- Активные дни имеют эффекты наведения (hover)
Адаптивный дизайн для мобильных устройств (при ширине < 768px календарь переходит на всю ширину)

3. JavaScript функциональность (`public/calendar.js`)

Новый файл calendar.js содержит класс Calendar с методами:

init() - инициализация календаря
render() - отрисовка календаря
renderTitle() - отрисовка названия месяца и года
renderDays() - отрисовка дней месяца
previousMonth() - переход на предыдущий месяц
nextMonth() - переход на следующий месяц
selectDate() - выбор даты при клике
isToday() - проверка, является ли день сегодняшним
isSelected() - проверка, выбран ли день
formatDate() - форматирование даты в формате ДД.МММ.ГГГГ

Особенности

✅ Интерактивные кнопки навигации - легко переходить между месяцами ✅ Выделение сегодняшнего дня - синий фон на текущую дату ✅ Выделение выбранной даты - зелёный фон на выбранную дату ✅ Русские названия - месяцы и дни недели на русском языке ✅ Адаптивный дизайн - правильно отображается на мобильных устройствах ✅ Без зависимостей - не требует дополнительных библиотек ✅ Чистый код - использует современный JavaScript с классами

Макет

┌─────────────────────────────────────────────────┐
│   Заголовок (логин, выход)                      │
├──────────────┬──────────────────────────────────┤
│  Календарь   │  Форма создания заметки          │
│              │                                  │
│ < Октябрь >  │  Кнопки форматирования (B I H)  │
│ Пн Вт Ср... │  [Текстовое поле]                │
│  1  2  3... │  [Сохранить]                     │
│              │                                  │
├──────────────┴──────────────────────────────────┤
│  Список заметок                                │
│  [Заметка 1]                                  │
│  [Заметка 2]                                  │
│  [Заметка 3]                                  │
└─────────────────────────────────────────────────┘

Использование

Откройте страницу заметок (/notes)
Слева вы увидите календарь текущего месяца
Нажимайте кнопки < и > для навигации по месяцам
Нажимайте на любой день для выбора
Выбранный день будет выделен зелёным цветом

Возможные расширения

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

Тестирование

✅ Навигация между месяцами работает корректно ✅ Выделение текущего дня работает ✅ Выделение выбранного дня работает ✅ Адаптивный дизайн для мобильных устройств работает ✅ Нет ошибок в консоли браузера ✅ Стили правильно загружаются

Версия

Дата добавления: октябрь 2025
Совместимость: все современные браузеры

6.1 KiB Raw Blame History Unescape Escape