side_navigation

Getting Started

Learn how to prepare your HTML page for Calendar.js. This guide explains how to add the necessary script tags, link stylesheets, and structure your markup so you can seamlessly integrate Calendar.js and display fully interactive calendars on your website.

Before proceeding, ensure that Calendar.js is installed or downloaded and properly set up in your project.

Prerequisites

Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:

<!DOCTYPE html>

Include CSS File

Include the following CSS file:

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

Include JS File

Include the following JavaScript file:

<script src="dist/calendar.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" );