side_navigation

Pin-Up Calendar

Explore a simple example of a basic Pin-Up Calendar.js instance configured with the standard default options, demonstrating how to quickly set up and display an interactive pin-up 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>

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:

const calendarInstance = new calendarJs( "calendar", {
    views: {
        fullMonth: {
            isPinUpViewEnabled: true,
            pinUpViewImageUrls: [
                "https://www.william-troup.com/images/top/main.jpg",
                "https://sleeplessocean.com/images/background.jpg"
            ]
        }
    }
} );

Result