The basics of a HTML calendar

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.

Comments

Your comment: Your Name: Your Web Presence: Submit