Calendar views in EJ2 TypeScript Calendar control
26 Apr 20235 minutes to read
The Calendar has the following predefined views that provide a flexible way to navigate back and forth when selecting dates.
View | Description |
---|---|
month (default) | Displays the days in a month. |
year | Displays the months in a year. |
decade | Displays the years in a decade. |
When view is defined to the start
property of the Calendar, it allows you to set the initial view on rendering.
The following example demonstrates how to set the year
as the start view of the Calendar.
import { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';
//creates a calendar with year view.
let calendarObject: Calendar = new Calendar({
//sets the start view.
start: "Year",
//sets the value.
value: new Date()
});
calendarObject.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Calendar control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!--style reference from the Calendar component-->
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<!--element which is going to render the Calendar-->
<div id='element'></div>
</div>
</body>
</html>
View restriction
Calendar view navigation can be restricted by defining the start
and depth
property that allows you to select the date from that view.
By defining the start and depth property with the different view, drill-down and drill-up views navigation can be limited to the user. Calendar views will be drill-down up to the view which is set in depth
property and drill-up up to the view which is set in start
property.
The following example displays the Calendar in decade
view, and allows you to select a date in month
view.
Depth view should always be smaller than the start view. If the views are the same, then the Calendar view remains unchanged.
import { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';
//creates a calendar with decade view and navigates up to year view.
let calendarObject: Calendar = new Calendar({
//sets the start view.
start: "Decade",
//sets the depth view.
depth: "Year"
});
calendarObject.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Calendar control</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<!--style reference from the Calendar component-->
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-calendars/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<!--element which is going to render the Calendar-->
<div id='element'></div>
</div>
</body>
</html>