README 被网友催着补图：这个开源日历面板先把功能做全了

Kargul Studio 的 Marcel 在 X 上把 Kargul Workspace 的日历设计开源了。仓库名拼写是 calender-app-design，在线 demo 和 GitHub 都能直接打开。

视频里是 2026 年 11 月 8 日到 14 日的工作日历。左侧菜单有 Dashboard、Analytics、Personal details、Documents、Time off、Time tracking、Benefits、Payments、Invoice、Withdrawal methods。右侧是休假统计：可用天数、待审批请求、即将到来的假期、年度总休假日数。日历上浅蓝色是个人事务，粉色是从结转来的额外休假，绿色是半天假，底部请求表格里能看到 Approved 和 Declined。

仓库里的 Time off 页面按 Figma 设计像素级复现，其他侧边栏页面沿用同一套视觉语言。它能在浏览器里直接操作。日历支持周、日、月视图，空白处拖拽创建，事件可跨天拖动，拉底边改时长，重叠事件并排显示，全天栏带公共假日，还有实时 now-line 和详情弹层。Time off 的请求对话框会按工作日计算，跳过周末和假日，并显示提交后的余额；统计从请求和额度算出来；请求表支持搜索、筛选、排序、详情、编辑、取消、删除，以及经理审批或拒绝的预览。

外壳也做了：工作区切换、⌘K 跨页面搜索事件和请求以及文档发票、通知、帮助菜单、深色模式、账户菜单。快捷键包括 ⌘K 搜索、N 新建事件、R 申请休假、T 回到今天、←/→ 前后切换、D/W/M 切换视图、? 看快捷键。

技术栈是 Next.js 16 的 App Router 和 Turbopack，React 19，TypeScript，Tailwind CSS v4，shadcn/ui 的 Radix 组件，Zustand 的 persist 中间件把数据写进 localStorage，next-themes 管深色模式，Sonner 出 toast，cmdk 做命令面板。没有后端，所有数据存在浏览器里。跑起来就两步：npm install，npm run dev。想回到设计稿的初始状态，用 Settings 里的 Data 重置 demo 数据，或者清站点数据。种子数据就是视频里那周：2026 年 11 月 8 日到 14 日，选中 11 月 10 日周二，额度显示 7 天可用、2 个待审批、3 天即将到来。许可证是 MIT。

有网友在回复里点出，拖拽调整大小和重叠事件并排，是多数日历模板会跳过的部分；数据落在 localStorage，克隆和试玩成本低。还有网友直接催 README：加点图片、视频，别只放几行字。这个反馈挺准，功能先做全了，文档还差点意思。

这套东西的价值在缩短设计稿到可交互原型的距离。想抄作业，先看 Time off 页的统计和请求表格；想拿去改产品，先补后端、权限和审计。纯 localStorage 适合演示，不适合直接当生产后端。

仓库在 GitHub，在线 demo 在 calender-app-design.vercel.app。