「开源」一个可以对日期自定义标记并且生成分享图的日历 - 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...

相关推荐
吃杠碰小鸡10 分钟前
commitlint校验git提交信息
前端
虾球xz41 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript