From 076bbba2e8ab6bd3538de70213a9f783859a4f46 Mon Sep 17 00:00:00 2001 From: Fovway Date: Sat, 18 Oct 2025 00:34:08 +0700 Subject: [PATCH] docs: Add detailed calendar feature documentation --- CALENDAR_FEATURE.md | 95 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 95 insertions(+) create mode 100644 CALENDAR_FEATURE.md diff --git a/CALENDAR_FEATURE.md b/CALENDAR_FEATURE.md new file mode 100644 index 0000000..5427758 --- /dev/null +++ b/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 +- Совместимость: все современные браузеры