Default First View : Demos : Calendar.js

side_navigation

Basic
Basic Calendar
Assign Custom Triggers
Views
Pin-Up Calendar
Widget Calendar
Date-Picker
Usage
Import/Export Events
Plugins
jQuery
Data Binding
Setup
Default First View
Reversed Days
Persistence Storage
Full-Screen
Translations

Default First View

Explore an example of a Calendar.js instance displaying a different view, right at startup instead of the default monthly view..

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", {
    viewToOpenOnFirstLoad: "full-day"
} );

Result

More Information

Need a different configuration option? Explore the complete Calendar.js documentation here to see every configuration option and learn how to use them in your projects.