A Calendar in CSS and Javascript

I started to look at this when I was working on content for the Village Hall website (booking forms).

My conclusion was at the time was that this was not a trivial exercise. The main idea was to have an events calendar that users of the website could see such things as when to hall was booked and when events were scheduled.

It was attempted on original Wordpress website by the use of a plug-in that was presumably found on the Wordpress website that a developers had posted for others to use. Unfortunately the plug-in ccntained a fair amount of PHP that required a knowledge of PHP to implement it. The attempt was abandoned as it just through multiple errors when it was accessed.

When I attempted it on my non-wordpress site I came across some code on Codepen. I found that I could embed the example on this page. The JavaScript and the CSS is far too sophisticated for me to understand.

I must admit that to just present a calendar in a form or a transaction on a web page the form elements for dates work quite well and you have re-invent the wheel. The HTML input tag of type="date" works well:

The HTML tag reponds differently and its behaviour is deterimed by your browser.

Code copied from Codepen (link below)

See the Pen Dynamically generated calendar by Elhebert (@Elhebert) on CodePen.