jQuery Plugin

Explore an example of creating a Calendar.js instance with jQuery. This guide shows how to integrate Calendar.js using jQuery selectors and methods, making it easy to build and customize an interactive JavaScript calendar.

Include Files

Make sure you include the following files:

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

Create DOM Element

Add a new DOM element to house the Calendar.js instance:

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

Create Calendar.js Instance

Run the following JavaScript to create a new Calendar.js instance with the translations:

const calendarInstance = $( "#calendar" ).calendarJs()[ 0 ];

Result