This is a recent quick project I built using React + Tailwind. A few friends and I get together every week for Dungeons and Dragons. The campaign we’re currently playing requires some tedious time tracking. (We have to do a certain number of actions each week and record them for the benefits they give.)
Unfortunately, using a custom google calendar wouldn’t cut it for our purposes. This fantasy setting had its own custom calendar. I needed a way to create a custom calendar that was simple and user friendly. So I started coding exactly what I needed!
This calendar app lets users add custom months each with their own set number of days. Users can set the start year and the number of years to display as well as days of the week. They can also add custom event categories and give them a set color. The application does all the math and generates each month automatically!
For longer lists the app includes a “Jump To” component that appears either on the left side on desktop, or on the bottom on mobile! It’s a list of each month including a button that will scroll the user to it.
The calendars are mobile friendly, collapsing down to a single column at certain browser widths (depending on how many days of the week there are.) The app also includes a local storage feature so that data added to the calendar isn’t lost on refresh. The data can be exported/imported as a JSON file as well!
The site currently doesn’t use any database connections as it was meant to be a helpful tool for a small group of people. If I return to this project to improve it, that would likely be the first feature I would add.