跳转到内容

场景 32:日历系统 (Calendar System)

从一个纯前端月视图,演进到企业级日历协作平台。


你需要一个可以查看和管理日程的日历工具,支持月视图和周视图。

  • 月视图和周视图渲染(正确的日期网格)
  • 事件创建:点击日期创建,填写标题、时间、描述
  • 事件存 localStorage,支持拖拽调整时间
  • 今日高亮,事件颜色分类

用 React + Tailwind 构建日历应用。月视图:7 列(周一到周日)× 5-6 行,正确显示每月日期(含上月末和下月初的灰色日期)。周视图:7 列 × 24 行(小时),事件块按时间段定位。点击空白创建事件(弹窗:标题、开始时间、结束时间、颜色标签、描述)。事件可拖拽到其他日期/时间(onDrag)。月视图/周视图切换按钮,上一月/下一月导航。数据存 localStorage。今日日期特殊高亮。

  • 月视图日期网格正确(含跨月日期)
  • 周视图事件按时间定位
  • 创建事件后在日历上显示
  • 拖拽事件可以调整日期/时间
  • 刷新页面事件不丢失
  • 日期计算和日历网格 → Module 1
  • CSS Grid 定位事件块 → Module 1
  • 拖拽交互实现 → Module 2

V2 — 10 个用户:后端存储与 iCal

Section titled “V2 — 10 个用户:后端存储与 iCal”

日程需要在服务端持久化,支持标准格式导入导出。

  • 事件 CRUD API,SQLite 存储
  • iCal 格式导入(.ics 文件解析)
  • iCal 格式导出(生成 .ics 文件)
  • 多日历支持(工作、个人、假期等)

用 Go + Gin + GORM + SQLite 构建日历后端。模型:Calendar(名称、颜色、所有者)、Event(标题、描述、开始时间、结束时间、全天事件布尔值、位置、日历ID)。API:事件 CRUD、按时间范围查询事件(GET /api/events?start=&end=)、日历 CRUD。iCal 导入:POST /api/import 接收 .ics 文件,解析 VEVENT(用 ical-go 库或自实现解析 BEGIN:VEVENT…END:VEVENT),创建事件。iCal 导出:GET /api/export/:calendarId 生成标准 .ics 文件。

  • 事件保存到数据库
  • 按时间范围查询正确返回事件
  • .ics 文件导入后事件正确显示
  • 导出的 .ics 可以导入 Google Calendar
  • 多个日历独立管理
  • iCalendar 标准格式 → Module 3
  • 时间范围查询优化 → Module 4
  • 多日历数据隔离 → Module 4

团队成员需要互相邀请参加会议,查看彼此的日历。

  • 迁移到 PostgreSQL
  • 邀请参会:创建事件时邀请其他用户
  • RSVP 响应:接受/拒绝/待定
  • 日历共享:将自己的日历对他人可见

迁移到 PostgreSQL。添加 EventAttendee 表(事件ID、用户ID、状态:accepted/declined/tentative、是否必须参加)。创建事件时可添加参会者(用户ID列表),被邀请者在 GET /api/events 中看到邀请事件(含 RSVP 状态)。RSVP API:PUT /api/events/:id/rsvp {status}。日历共享:CalendarShare 表(日历ID、被分享用户ID、权限:view/edit),共享后对方可查看/编辑该日历事件。事件详情显示所有参会者及其 RSVP 状态。邀请时发送通知(数据库通知表,前端轮询)。

  • 创建事件可以邀请参会者
  • 被邀请者看到事件邀请
  • RSVP 响应正确记录
  • 共享日历事件对方可见
  • 编辑权限共享后对方可修改事件
  • 多对多关系建模(事件-参会者)→ Module 5
  • RSVP 状态机 → Module 5
  • 共享权限模型 → Module 6

V4 — 1000 个用户:智能时间查找

Section titled “V4 — 1000 个用户:智能时间查找”

安排多人会议很痛苦,需要自动查找大家都有空的时间段。

  • 空闲时间查询:多人可用时间段交集
  • 智能建议:推荐最佳会议时间
  • 工作时间设置:每个用户定义自己的工作时间
  • Redis 缓存高频查询的日程数据

实现空闲时间查找。用户设置工作时间(WorkingHours 表:周几、开始时间、结束时间)。API:POST /api/free-time {user_ids, date_range, duration_minutes}。算法:对每个用户取其工作时间内的空闲段(工作时间 - 已有事件),然后求所有用户空闲段的交集,返回所有 >= duration 的可用时段。智能排序:优先返回所有人都是工作时间、避开午休(12-13点)、离当前最近的时段。Redis 缓存:按用户+日期缓存当天事件列表(TTL 5分钟),事件变更时删除缓存。

  • 查找结果只包含所有人都空闲的时段
  • 非工作时间不会被建议
  • 午休时间排序靠后
  • 缓存命中时响应明显更快
  • 事件变更后缓存正确失效
  • 时间段交集算法 → Module 7
  • 缓存策略(Cache-Aside)→ Module 8
  • 工作时间建模 → Module 7

V5 — 1 万用户:重复事件与时区

Section titled “V5 — 1 万用户:重复事件与时区”

每周例会需要设置为重复事件,分布在不同时区的团队需要正确处理时差。

  • RRULE 规则引擎:支持日/周/月/年重复、带结束条件
  • 时区正确处理:存储 UTC,显示本地时区
  • 提醒通知:邮件 + 浏览器推送
  • 异常实例:修改或取消某次重复事件

实现重复事件系统。Event 表添加 rrule 字段(RFC 5545 RRULE 格式,如 “FREQ=WEEKLY;BYDAY=MO,WE,FR;UNTIL=20261231”)。展开算法:给定时间范围,解析 RRULE 生成所有实例日期。EventException 表(事件ID、原始日期、修改后日期/null表示取消、修改内容JSON),展开时应用异常。时区:Event 存 UTC 时间 + 时区字符串(如 Asia/Shanghai),查询时转换为用户时区。提醒:EventReminder 表(事件ID、提前分钟数、方式:email/push),后台 goroutine 每分钟检查即将到来的事件,发送提醒。浏览器推送用 Web Push API。

  • 重复事件在日历上正确展开
  • 修改某次实例不影响其他实例
  • 取消某次实例后该日期不显示
  • 不同时区用户看到正确的本地时间
  • 提醒在正确时间发送
  • RRULE 递归规则引擎 → Module 9
  • 时区处理最佳实践(UTC 存储)→ Module 10
  • Web Push 通知 → Module 11

V6 — 10 万+ 用户:企业日历平台

Section titled “V6 — 10 万+ 用户:企业日历平台”

企业需要会议室预订、与邮件和视频会议集成、标准协议同步。

  • 会议室预订:资源日历,冲突检测
  • 集成:创建事件时自动发邮件邀请 + 生成视频会议链接
  • CalDAV 同步:与 Apple Calendar、Outlook 等同步
  • 管理后台:会议室管理、使用率统计

实现企业日历平台。Resource 表(名称、类型:meeting_room/projector/车、容量、位置、设备列表JSON)。预订事件关联资源,创建时检查冲突(同一资源同一时段不能重复预订)。集成:创建带参会者事件时,自动发送 iCal 邮件邀请(text/calendar MIME类型),正文含事件详情。可选集成视频会议(生成随机会议链接)。CalDAV 服务端:实现基本的 CalDAV 协议(PROPFIND/REPORT/PUT/DELETE),让 Apple Calendar 可以同步。管理后台:会议室列表、使用率报表(按日/周/月的占用率)、热门时段分析。

  • 会议室预订冲突正确拦截
  • 邀请邮件包含 iCal 附件
  • Apple Calendar 可以通过 CalDAV 同步
  • 会议室使用率统计准确
  • 视频会议链接自动生成
  • 资源预订与冲突检测 → Module 12
  • CalDAV 协议实现 → Module 3
  • 邮件集成(iCal 邀请)→ Module 13
  • 使用率分析报表 → Module 14