Alok Menghrajani
Previously: security engineer at Square, co-author of HackLang, put the 's' in https at Facebook. Maker of CTFs.
This blog does not use any tracking cookies and does not serve any ads. Enjoy your anonymity; I have no idea who you are, where you came from, and where you are headed to. Let's dream of an Internet from times past.
Home | Contact me | Github | RSS feed | Consulting services | Tools & games
Every year in the Gregorian calendar can be represented using one of 14 calendars. Let's take the month of January for any given year. There are seven possible days for the 1st of January (Monday thru Sunday). Once you know the day for the first of January, the rest of the year is going to always be the same, since the number of days in a month is fixed.
There is however one other difference to keep in mind: if a given year is a leap year or not (i.e. if there is a 29th of February).
There are therefore 14 possible calendars: 7 non-leap year calendars and 7 leap year calendars.
The disc below is an interactive perpetual calendar. It currently shows years 1981-2048, but this can be changed very easily.
Note: I used a well known trick which consists of having a special January (red Jan) and a special February (red Feb) for leap years. By doing this, we can reuse all the other months for both leap and non-leap years.
This calendar is built in the following way. We start with two empty discs placed one on top of another. The bottom disc rotates, while the top disc is fixed. The top disc contains two cutouts, one on the top to reveal the years and one on the bottom to reveal the days of the week.
We first place the days of the month, numbered 1 to 31 on the bottom part of the fixed disc. We then place the month names on the top part of the fixed disc. The months are arranged based on their relative offsets. E.g. Feb is 3 columns to the right of Jan because Jan has 31 days, and 31 modulo 7 is 3. Mar is on the same column as Feb, because Feb has 28 days, and 28 modulo 7 is 0.
We place the days of the week (Mon-Sun) on the inner part of the rotating disc. The weeks are repeated 4 times because the visible part takes up 90° of the disc. Finally, we place the years on the outer part of the rotating disc. The first year needs to be placed carefully (by looking up a known date). Each following years is shifted by 1 (because there are 365 days in a year, and 365 modulo 7 is 1). Leap years are shifted by 2, since there is an extra day in the year.
The code on this page is written in JavaScript. The hardest part was handling all the circle related geometry. The code uses the raphaël.js library, which provides a cross-browser API to vector graphics.