还在用便签排日程？「时间安排工作台」，把 TODO List 和时间表焊在一起了

todo-calendar

一个把传统 TODO List 和时间表结合起来的轻量项目计划工具，纯前端、零后端、本地持久化，开箱即用。本文从设计思路到核心实现，完整拆解这个项目的来龙去脉。

前言

不知道你有没有过这样的经历：

我被这些问题折磨很久了，于是干脆动手做了一个：Todo Calendar 一个把 TODO List 和时间表焊在一起的轻量工作台✨拖一下就能排期，冲突自动拦截，极重要事项一眼可见，还带专注计时。
最关键的是：纯前端，零后端，刷新不丢数据，开箱即用。

GitHub：https://github.com/yyyhhh0317/todo-calendar

这是个什么东西？

一句话：左侧是排期画布，右侧是任务池，拖一下就完成排期。

它不是又一个 TODO App，也不是又一个日历。它解决的核心问题是——"知道要做什么"和"知道什么时候做"之间的鸿沟。

传统 TODO List 只告诉你"要做这些事"，但不告诉你什么时候做；传统日历只告诉你"这个时间有空档"，但不告诉你该填什么进去。Todo Calendar 把这两件事放在同一个屏幕上，让你一眼看到所有未安排的任务 + 一眼看到所有空闲的时间，拖一下就完成匹配。

核心特性速览

1. 工作台布局：左 70% 排期 + 右 30% 任务池

左边是周/月视图的时间画布，右边是任务池。不需要在两个页面之间来回切换。

2. 任务拆分：允许把"大任务"拆分成"可执行的小块"

一个 4 小时的任务没法一口气做完？直接拆成 4 块，每块 1 小时，分散到不同时段。块是排期的最小单元——这个设计让排期变得灵活又可控。

3. 拖拽排期：所见即所得

基于 @dnd-kit 实现的拖拽体验：

• 从右侧任务池拖一个块到左侧时间格 → 自动按块时长占位
• 已安排的块可以拖动改时间，也可以拖回任务池取消
• 月视图支持日期级粗排，双击切到周视图细调时间

4. 冲突检测：30 分钟粒度，严格不重叠

冲突是排期最大的坑。Todo Calendar 在 30 分钟粒度上做冲突检测——你拖到一个已被占用的时间段，会立刻被拦下来，并及时地告诉你"和哪个任务冲突了"。

5. 极重要高亮：让真正要紧的事跳出来

不是所有任务都一样重要。项目支持两级重要标记：

• 极重要（critical）：红色渐变 + 脉冲圆点
• 重要（important）：琥珀色边框

日期也可以单独标记为"重要日期"，月视图上一眼可见。

6. 倒计时徽标： deadline 永远在眼前

给任务设置目标时间后，卡片上会自动显示"还剩 3 天"“还剩 5 小时”，到期自动标红。不用再打开日历倒着数日子。

7. 专注计时：单计时器 + 迷你悬浮条

点一下任务上的"▶"就开始计时，底部冒出一条迷你悬浮条显示当前计时。想看详情？点开面板就能看到完整时长。

为什么只允许一个计时器？ 因为人在同一时间只能专注一件事。多计时器听起来强大，实际上只会让你分心。

8. 本地持久化：零后端，刷新不丢

全部数据存在 localStorage，分四个独立区域：任务、任务块、排期记录、重要日期。不需要登录，不需要联网，打开浏览器就能用。

技术栈选型

项目结构

src/
├── app/ # 根组件 + 工作台布局
├── features/
│ ├── drag/ # @dnd-kit 拖拽封装
│ ├── focus/ # 计时器 + 倒计时 + 重要程度
│ ├── schedule/ # 周视图 / 月视图 / 排期工具
│ └── tasks/ # 任务卡片 / 拆分编辑器 / 任务池
├── shared/
│ ├── components/ # Button / Icons / SegmentedControl
│ ├── styles/ # 设计令牌 + 全局样式
│ └── utils/ # 日期 / 时间 / 工具函数
└── store/ # Zustand 三个独立 store

快速开始

三行命令跑起来：

git clone https://github.com/yyyhhh0317/todo-calendar.git
cd todo-calendar
npm install && npm run dev

浏览器打开 http://localhost:5173，开始排你的日程。

适合谁用？

• 独立开发者 / 自由职业者：自己排活儿，没人帮你定时间表
• 学生党：排课、排作业、排复习计划
• 产品经理 / 设计师：把零散的需求和评审排到时间轴上
• 任何觉得"任务清单 + 日历"两个 App 切来切去很烦的人

后续规划

开源不是终点，是起点。接下来还可能的完善方向：

• Vitest 单元测试 + Playwright E2E 全链路测试
• 数据导入导出（JSON），支持跨设备迁移
• 主题色自定义面板
• PWA + Service Worker，支持离线使用
• 可选云同步后端（接 Supabase / LAF）

开源地址

项目已开源，MIT 协议，欢迎 Star、Issue、PR：

GitHub：https://github.com/yyyhhh0317/todo-calendar

如果你也觉得"任务和时间表应该放在一起"，欢迎来一起建设。提 Issue 告诉我你的使用场景，提 PR 帮我把它做得更好。

如果这篇文章对你有启发，或者你觉得这个项目有点意思，麻烦点个赞 + Star 支持一下。 开源不易，每一个 Star 都是我继续做下去的动力。