Preview online: https://calendar.xym.im/
Open source address: https://github.com/xyxc0673/calendar-remark
Introduction#
Calendar Remark is a calendar designed to be simple and generate shareable images. It supports features such as PWA, Dark Mode, and Responsive Design.
The initial requirement for this tool came from the fact that the company's holiday schedule may differ from the national statutory holiday schedule during annual holidays. If you need to "synchronize" this company's schedule with others, existing calendar tools can't meet this requirement. Therefore, this tool with a small demand was completed and ready for release after about two weeks of development.
Currently, Calendar Remark supports the following features:
- Basic lunar calendar + holiday calendar (thanks to lunar-typescript)
- Custom marking of specific dates and generating shareable images
- Year progress of the current time
The process of using custom marking is as follows:
- Select the date you want to customize and click the edit button on the right side
- Modify the content at the bottom of the date or the mark in the upper right corner in the expanded editing box
- In addition, there are specific display effects for the "work" and "rest" states, which can be directly modified in the Radio Group on the right to edit content + style
AI Prompt#
Here, I would like to share an interesting practice. The first line of effective code in Calendar Remark is basically generated using Github Copilot and ChatGPT 4. AI-assisted programming was also extensively practiced later.
For example, the core of Calendar Remark is a calendar application that uses the technology stack of React + TypeScript + Tailwind CSS. The conversation with Copilot is as follows:
Me: Implement a calendar using tailwindcss, and users can switch between different months.
Me: Fill in the dates with real dates.
Me: Users can also switch between years.
Me: Use Chinese.
Me: Highlight the user's current date.
As you can see, if you have a clearer understanding of your requirements, you can get answers closer to your requirements in the conversation. For example, the above conversation can be changed to:
As a master familiar with React, use React + TypeScript + Tailwind CSS to implement a Chinese calendar. Users can switch between different months and years, and highlight the current date. Fill in the dates with real dates and provide complete runnable code.
Easter Egg#
Finally, I would like to share some screenshots of early versions. As you can see, in the beginning, the core functionality was the most important, and other features could be added gradually later.
However, a lot of time was spent on fine-tuning the animations in the early stages. Later, a "easter egg" was hidden in the interface 😂. I wonder who can find it first.
If you are interested in other parts of the code, you can mention it in the comments, and I will review the entire project based on these later.