日程事件管理日历应用
概述
一款实用的日程管理与事件进度把控工具，支持导出为 Excel。适用于项目进度管理、个人日程及事件管理，也可作为前端代码逻辑参考。
核心功能
- 日程事件的添加、编辑、删除、查看、搜索。
- 展示日程事件的截止倒计时，方便进度把控。
- 支持跨天、跨月添加，管理短周期或长周期事件。
- 支持将日程事件导出为 Excel 文档。
- 多种主题风格切换，适配不同场合和心情。
- 轻量化数据管理，浏览器本地存储，支持历史事件自动清理。
技术实现
核心技术栈为 JavaScript 和 HTML。
功能需求与设计规范
视觉设计
- 圆角风格，现代可爱。按钮加入内阴影，呈现立体光泽感。
- 页面文字和主要颜色配色方案根据背景图主色调自动选取，共六种方案（蓝、橘/咖、粉、绿、黑、紫）。
- 底部背景图有 10 种可选，切换主题时同步切换背景图及配色方案。
- 整体背景加半透明毛玻璃遮罩效果。
页面布局
- 左上角 Icon 控制左侧抽屉展开/关闭（基本设置区）。
- 中心区域为日历，每月展示，日期为小方框，边框 3px。鼠标移入显示'+'号添加事件。
- 底部有'事件搜索'按钮。
- 右侧抽屉默认展开，展示当天事件。
模块详情
左侧抽屉（基本设置）
- 标题可编辑，最多 8 字。
- 主题切换功能。
- 导出当前月份事件为 Excel。
- 清空当前月份事件（2 次确认）。
- 清空所有事件（2 次确认）。
- 开关：历史事件自动清理（默认开启），优化存储性能。提示若清除 Cookie 会丢失数据。
中心区域（日历）
- 顶部展示当前月份，支持切换。
- 每日格子内显示事件小圆圈，颜色对应状态，半径对应数量。
- 自动计算跨天事件并展示。
- 底部'事件搜索'按钮。
事件搜索弹窗
- 输入框模糊查询名称。
- 状态多选（未开始、进行中、已完成、已逾期）。
- 日期范围选择。
- 搜索结果列表，点击可编辑。
添加/编辑事件弹窗
- 名称（限制 20 字）。
- 状态单选（添加时不可选已完成/已逾期，编辑时逾期不可改状态）。
- 开始/结束时间（24 小时制，逾期不可改时间）。
- 描述。
- 距离截止倒计时文本（逾期红色，完成绿色显示完成时间）。
- 保存/更新按钮。
右侧抽屉（当天事件）
- 默认展示今天事件。
- 标题显示日期，今天带标识。
- 事件卡片展示，状态标识右对齐。
- 48 小时内截止事件吸附标签。
- 鼠标移入显示删除图标（2 次确认）。
- 排序：未开始/进行中优先（按截止倒序），其次已逾期，最后已完成。