Календарь-органайзер
Реализуйте органайзер в виде календаря, с помощью которого можно планировать дела на любое количество дней вперед.
Основные возможности проекта
- Календарь на текущий месяц с выделением дней, на которые запланированы дела.
- Переключение между месяцами.
- Список дел на выбранную дату.
- Создание дел с указанием времени начала, времени конца и названия.
- Редактирование дел по двойному клику.
- Удаление дел.
- Отметка дел как выполненных.
- Автоматическое определение статуса дела (текущее, просроченное, предстоящее).
- Контроль пересечения времени дел.
- Данные хранятся в localStorage.
Главная страница
На странице должны быть размещены:
- Календарь с заголовком (месяц, год) и стрелками навигации.
- Блок с делами на выбранную дату.
Календарь
Календарь должен отображать текущий месяц в виде сетки. Особенности:
- Текущий день выделен отдельным стилем.
- Дни, для которых есть запланированные дела, выделены отдельным стилем (например, точка или цвет).
- При клике на дату открывается список дел на эту дату.
Список дел
При клике на дату в календаре отображается список дел на эту дату. Каждое дело должно содержать:
- Время начала.
- Время конца.
- Название дела.
- Статус: выполнено (есть отметка), текущее (выполняется сейчас), просроченное (срок прошел, не выполнено), предстоящее (еще не наступило).
Цвет или стиль дела меняется в зависимости от статуса:
- Выполнено - серый, перечеркнутое.
- Текущее - зеленый или с ярким фоном.
- Просроченное - красный.
- Предстоящее - обычный стиль.
Добавление дела
Для добавления дела используется форма с полями:
- Время начала (инпут time).
- Время конца (инпут time).
- Название дела (инпут).
- Кнопка "Добавить дело".
При добавлении дела система проверяет, не пересекается ли новое дело с уже существующими на эту дату. Если пересечение обнаружено, выводится сообщение об ошибке.
Редактирование дела
Редактирование полей дела происходит по двойному клику:
- При двойном клике на поле появляется инпут с текущим значением.
- Завершение редактирования происходит по нажатию Enter или потере фокуса инпутом.
Удаление дела
У каждого дела должна быть кнопка "Удалить". При нажатии на нее появляется подтверждение (confirm), после чего дело удаляется.
Отметка дела выполненным
У каждого дела должна быть кнопка или чекбокс для отметки "Сделано". При отметке дело меняет стиль на серый/перечеркнутый.
Автоматическое определение статуса дела
Система автоматически определяет статус дела на основе текущего времени:
- Если текущее время находится между временем начала и конца дела - дело "Текущее".
- Если текущее время больше времени конца дела, и дело не отмечено выполненным - дело "Просроченное".
- Если текущее время меньше времени начала дела - дело "Предстоящее".
Хранение данных
Все дела должны храниться в локальном хранилище браузера (localStorage). При загрузке страницы данные загружаются из хранилища, при изменении - сохраняются обратно.