Search results

Change the First Day of Week in JavaScript Calendar control

19 Oct 2021 / 1 minute 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.

Source
Preview
app.ts
index.html
styles.css
Copied to clipboard
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');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</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>
Copied to clipboard
/* Example - styles */

#container {
    visibility: hidden;
    max-width: 250px;
    margin: 0 auto;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

#element {
    display: block;
}