2026-05-27Solo Developer

TipCalendars

reacttypescriptfrontend

View project ↗

纯前端 React 日历应用。数据存在 localStorage，无后端，打开即用。

支持月/周/日三视图、日程与便签两种模式、重复日程、农历、多国节假日、中英双语。

技术栈：React 18 函数组件 + Hooks，Vite 6 构建，dayjs 处理日期计算，Vitest 4 + 35 个单元测试，纯 CSS（无第三方 UI 库，CSS Custom Properties 做设计 token），Web Animations API（element.animate()）做弹窗动效，localStorage 持久化。

组件结构：

text
App
├── CalendarHeader        ← 月/周/日切换、年月选择器
├── MonthView             ← 月视图 6×7 网格
│   └── DayCell[]         ← 日期格，带农历、ARIA、拖放
│       └── EventCard[]   ← 可拖拽日程卡片
├── WeekView              ← 周视图 7 列时间轴
├── DayView               ← 日视图时间轴
├── NotesPanel            ← 便签面板，支持触摸拖拽排序
├── SearchBar             ← 搜索框，圆形胶囊展开
├── SettingsPanel         ← 设置抽屉（主题/语言/节假日/ICS）
├── EventModal            ← 日程编辑弹窗（重复/提醒/冲突检测）
└── KeyboardShortcuts     ← 快捷键速查面板

主要功能：月/周/日三视图切换；日程拖拽改日期，冲突时提示；重复日程（每日/每周/每月/自定义）；农历 + 多国节假日；便签面板，触摸拖拽排序；中英双语、深色模式；快捷键全覆盖，按 ? 弹出速查面板；ICS 导入导出；35 个单元测试。