Once upon a time we've build a calendar and it was working great! Well, up until the moment a whole month disappeared from it. We had January, February, March, May, July, August, a couple of Septembers... Yeah, it was wild, almost as bad as the AI generated one on this article's poster! The problem was that we used a third party library and despite our best efforts we failed to find the issue causing the bug. I wish I had a ready calendar skeleton back then - would save us a lot of time!
And hence I suggest you build one for yourself. Working with dates is all fun and games till timezones come into play, so be mindful of that whenever you do - and, judging by my own experience, calendars, date inputs, launch dates and schedules - are features I had almost in every project.
Calendar view: requirements & recipe
As a user I want to be able see a calendar for a selected month and year, so that I could see day of the week of the date in question.
Here's an example how this view could like:
Of course, you're free to implement it in HTML, like normal people, or you could follow my strange desire to make it a terminal view - it's up to you.
However, there are some requirements to keep in mind:
Requirements
- Calendar should show week days with the order in accordance with the locale of the user.
- All rows should have exactly 7 cells, padded with empty elements or faded out dates from the previous/next month.
- February should have a proper amount of days for leap and regular years alike.
- Current date should be highlighted.
- Think about accessibility: how should screen readers read your calendar?
Recipe
- Start with a static markup for the current month and year.
- Ensure that markup is accessible and semantic, e.g. with the help of Lighthouse
- Write a function that would create a list of dates for a provided month and year. I highly recommend writing some tests, especially around leap year logic.
- Write a function that would split days into rows for the order of weekdays you're most comfortable with (e.g. when week starts from Sunday). Ensure that all rows have exactly 7 elements.
- Adjust the previous function to work for the other case (e.g. when week starts from Monday).
- Create a function that would render the calendar using your favourite framework (or none).
- Highlight current date.
- Profit.
Hints
Almost any high-level language has a Date abstraction in the standard library: you can use it not only to construct proper dates, but also to verify the ones that aren't.
For example setting a day to 31 in a month that has only 30 days wouldn't work - and that could help you determine how many days a month has. Or setting a date to a 0 would result in the last day of the previous month.
Have fun!
Hard mode: Dates range input
There's a built-in HTML <input type="date" .../>, but unfortunately it doesn't support selection of a. range of dates. Selecting two dates from two inputs is also an option and is great for accessibility, but unfortunately it doesn't always fit into a page design.
Therefore, you could create a text input that would allow user to enter dates as December, 1 - December, 31 2023 or 1.12.2023 - 31.12.2023 and render this selection on a calendar.
A good input should be able to validate the dates, for example that start date is before the end date and that both are valid dates that can be parsed.
Share your creations and feedback and see you tomorrow!
Liked the idea a lot and would love to have it all year long?
Top comments (4)
That’d take a bit more time than the avatar one 😅
Indeed, it might seem this way. Is it the styling part that feels too much or something else?
No, I’d say the dynamic part is definitely trickier (the inputs and alike), as drawing the calendar grid is more or less trivial by itself
I see, you can limit the scope and start with just one format for the input for example. Whatever feels fun and still challenging. Let me know how it goes!