The basics of a HTML calendar

2:53 PM 10/7/20182:42 PM 2/15/2019

There are already dozens of calendars out there on web, which usually are used as date-picker widget. And nowadays modern browsers just use built-in date-picker for any <input type="date"> elements.

So. We're not going to build a date-picker here. We are going to instead build a non-popup (always shown), table-like and responsive calendar. Something like the one below, to be filled-in by users just like a real, printed wall calendar:

The save and load buttons you see on the top of calendar are just dummy buttons: upon click they do nothing at all. But you get the idea, javascript click handlers can be installed on them to perform save to / load from database server, or even to / from local devices nowadays, as local files (see Saving JSON to and / or loading it from local file for further info).

A click to a date (of current, selected month and year) shall explode the date into full calendar width and height, and this should reveal all the details of the clicked date.