/domcalendar

A pure javascript calendar

Primary LanguageJavaScript

Dom Calendar

This is a pure javascript calendar.

I made this because I wasn't able to find something like this that was pre-built.

I found plenty things that were overly complicated or in languages like typescript which needs to be compiled to javascript.

setup

Just copy and paste the code to where you want it to be. The only restriction is that you need to keep the id's and class names the same so that the css and javascript variables all line up correctly. (Feel free to update them as you see fit)

Notes

This is not a fully functional calendar where you can add events etc. It is just the frontend for it and is meant to be extended.

Add Event listeners to whatever you want to provide additional functionality.

Usage

There are two versions of this:

One has just the calendar with days. (Use domcalendar.js and domcalendar.html with domcalendar.css) This is to be used for a user to select a date. The result will be stored in selectedDate.

The second version is where you want a user to select a date and then select an hour. Use domCalendarWithTimes.js, domCalendarWithTimes.html, and domcalendar.css for this setup.
(This should be customized to your particular needs)