Change the first day of week in EJ2 TypeScript Calendar control

26 Apr 20232 minutes to read

The Calendar provides an option to change the first day of the week by using the firstDayOfWeek property. Generally, the day of the week starts from 0 (Sunday) and ends with 6 (Saturday).

By default, the first day of the week is culture specific.

The following example shows the Calendar with Tuesday as the first day of the week.

index.ts
index.html
import { Calendar } from '@syncfusion/ej2-calendars';
//creates  a calendar with Tuesday as the first day of the week.
let calendarObject: Calendar = new Calendar({
    //sets the first day of the week.
    firstDayOfWeek: 2
});
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.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/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>