Data Binding
Explore how to create Calendar.js instances with data-binding attributes. This example demonstrates how to initialize and customize interactive calendars directly from your HTML markup for a cleaner, more maintainable setup.
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.binding.min.js"></script>
Create DOM Element
Add a new DOM element to house the Calendar.js instance:
<div data-binding-calendar='{ "views": { "fullMonth": { "showExtraTitleBarButtons": true } } }'></div>Create Calendar.js Instance
Run the following JavaScript to create a new Calendar.js instance with the translations:
const calendarInstance = $( "#calendar" ).calendarJs()[ 0 ];