docs: Add detailed calendar feature documentation

CALENDAR_FEATURE.md

@@ -0,0 +1,95 @@
+# Функция календаря в 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]                                  │
+└─────────────────────────────────────────────────┘
+```
+
+## Использование
+
+1. Откройте страницу заметок (`/notes`)
+2. Слева вы увидите календарь текущего месяца
+3. Нажимайте кнопки `<` и `>` для навигации по месяцам
+4. Нажимайте на любой день для выбора
+5. Выбранный день будет выделен зелёным цветом
+
+## Возможные расширения
+
+- Фильтрация заметок по выбранной дате
+- Отображение точек/маркеров на днях, в которые созданы заметки
+- Всплывающие подсказки с предпросмотром заметок при наведении
+- Возможность создания заметки на конкретную дату
+- Синхронизация выбранной даты в календаре с фильтром заметок
+
+## Тестирование
+
+✅ Навигация между месяцами работает корректно
+✅ Выделение текущего дня работает
+✅ Выделение выбранного дня работает
+✅ Адаптивный дизайн для мобильных устройств работает
+✅ Нет ошибок в консоли браузера
+✅ Стили правильно загружаются
+
+## Версия
+
+- Дата добавления: октябрь 2025
+- Совместимость: все современные браузеры