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