Insert A Basic Calendar UI Into Your Webpage – calendar.js

Preview:

Description:

A basic calendar component written in ES6/LESS that displays a pretty clean calendar UI on your web application.

How to use it:

Download and insert the necessary JavaScript & CSS files into the document.

<link rel="stylesheet" href="calendar.css">
<script src="calendar.js"></script>

Create a container in which you want to place the calendar.

<div id="calendar-wrap">
</div>

Create a new Calendar.

let calendar = new Calendar('calendar-wrap')

Override the default variables to customize the appearance of the calendar component.

@background: #0B0C10;
@border: #004E6D;
@gray: #4b5457;
@green: #2be6d6;
@text: #1E94A0;
@selected-item: #00172D;
@shadow: #000e1c;
@body-background: #0C101A;