# Функция календаря в 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
- Совместимость: все современные браузеры