iPhone Style Calendar In Native JavaScript – iCalendar

Preview:

Description:

iCalendar is a vanilla JavaScript library to render an iPhone-style calendar similar to the legacy iOS calendar UI component.

How to use it:

Insert the JavaScript iCalendar.js and Stylesheet iCalendar.css into the document.

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

Render a calendar in the desired container.

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

var iCal = new iCalendar('calendar');
iCal.render();

Listen to calendar date selected event (Get the selected date).

document.addEventListener('iCalendarDateSelected', function(event) {
  console.log(iCal.selectedDate);
});