日历工具

日历工具

项目简介

日历工具是一款轻巧易用的纯前端网页日历应用。它把日常生活中最常见的「看日历、记安排」场景搬到浏览器里：打开即用、无需安装、无需注册，点击日期就能随手记下一件待办，数据自动保存在本地，关闭页面也不会丢失。

整个应用由单个 HTML 文件承载，不依赖任何框架与后端服务，是一个真正的「零依赖」工具型网页。

核心功能

• 月度视图：以周一到周日为列展示整月日期，支持「上一月 / 下一月」切换与「回到今天」快捷跳转。

• 今日高亮：当天日期以主题色高亮显示，一眼定位今天。

• 事件管理：点击任意日期即可选中，随后添加或删除当天的事件；有事件的日期会显示圆点标记，便于快速浏览哪些日子有安排。

• 数据持久化：所有事件数据通过浏览器 localStorage 保存，刷新页面、关闭浏览器后数据依然保留。

• 统计面板：自动统计本月事件总数与有事件的天数，帮助用户总览当月安排密度。

• 响应式布局：桌面端采用左右两栏，窄屏自动切换为单栏堆叠，移动端同样可用。

技术架构

应用采用「视图层 → 逻辑层 → 数据层」的三层纯前端架构，全部运行在浏览器端。

• 视图层：包括日历视图组件、事件管理组件与统计面板。日历视图通过 CSS Grid 生成 7 列日期网格；事件管理组件提供输入框与事件列表交互；统计面板实时汇总当月数据。

• 逻辑层：视图渲染模块负责按年、月计算每个日期在网格中的位置；交互逻辑模块统一处理导航切换、日期选中与事件增删的状态联动；数据持久化模块负责序列化与读写。

• 数据层：采用「日期 → 事件数组」的映射结构，事件以 YYYY-MM-DD 格式作为键存入 localStorage 的 calendar-events 字段，读取时自动解析恢复。

核心逻辑说明

日期网格计算：以当月 1 日的星期几为基准推算第一行空缺天数，再根据当月天数逐日填充，最后补齐末尾空白天数，保证日历始终为完整网格。

事件存储结构：{ "2026-08-18": ["开会", "提交周报"], "2026-08-20": ["体检"] }，天然支持按日期索引，渲染时只需查表即可判断某天是否有事件、有几个事件。

渲染联动：选中日期、增删事件、切换月份等操作都会统一触发重绘，界面始终与数据保持一致，逻辑简单且不易出错。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用，无需任何构建步骤；也可通过任意静态文件服务器托管（如 python3 -m http.server）访问。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部功能，部署只需一个静态服务器。

• 数据本地化：事件数据只保存在用户浏览器，无隐私上传风险。

• 代码简洁：核心逻辑不足 200 行，易于阅读、二次开发与扩展（例如增加农历显示、提醒功能等）。

• 视觉清爽：以蓝色为主色调的卡片式界面，今日高亮与圆点标记让信息层次清晰。