「开源」一个可以对日期自定义标记并且生成分享图的日历 - Calendar Remark

介绍

Calendar Remark 是一款设计简洁,可供标记以及生成分享图的日历,支持 PWA 、Dark Mode 、Responsive Design 等特性。

最开始的需求源自于每年节假日放假时,公司的放假安排可能和国家法定节假日放假安排不太一样。此时如果需要将这个公司的安排"同步"给其他人的话,现有的日历工具基本上没办法实现这个需求,所以这个需求量极小的工具在大约两个星期的开发后完成了第一个可上线的版本。

技术栈为:

  • React
  • TypeScript
  • Tailwind CSS
  • Vite
  • Jotai

目前 Calendar Remark 支持以下的功能:

  • 基本的农历日历 + 节假日日历(感谢 lunar-typescript
  • 自定义标记特定的日期,并且生成分享图
  • 当前时间的年进度

自定义标记的使用流程是:

  1. 选中想要自定义的日期,在右边点击修改按钮
  2. 在展开的编辑框中修改日期底部的内容或者右上角的标记
  3. 另外对于班和休这两种状态是会有特定的显示效果,可以直接在最右边的 Radio Group 中切换直接修改编辑内容 + 样式

AI Prompt

在这里分享一个有趣的实践,Calendar Remark 的第一行有效代码基本上是使用 Github Copilot 和 ChatGPT 4 生成的,后面也大量实践了 AI 辅助编程。

例如 Calendar Remark 的本体是一个日历应用,使用的技术栈是 React + TypeScript + Tailwind CSS ,与 Copilot 的提问对话如下

Me: 使用 tailwindcss 实现一个 calendar ,用户可以切换不同的月份

Me: 使用真实的日期填充日期

Me: 用户还可以切换年份

Me: 使用中文

Me: 高亮用户当前日期

可以看到,如果能更清楚的知道自己的需求,那么在对话中可以获得更接近要求的答案,例如上面的对话可以改成:

你作为一个熟悉 React 的大师,使用 React + TypeScript + Tailwind CSS 实现一个中文 Calendar ,用户可以切换不同的月份、年份,并且高亮当前的日期,使用真实的日期填充日期,给出完整可以运行的代码

彩蛋

最后,分享早期版本的一些截图,其实可以看到,一开始的时候,核心功能是最重要的,其他的都可以在后期慢慢添加

不过前期也花了挺多的时间在动画的微调上,后面还在界面上埋了一个"彩蛋"😂,不知道谁能第一个找出来

另外如果大家对其他部分感兴趣的话,可以在评论区提一下,后面抽空再根据这些对整个项目复盘一下。

在线预览:calendar.xym.im/

开源地址:github.com/xyxc0673/ca...

相关推荐
也无晴也无风雨24 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational2 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui