Customize Day Header in JavaScript (ES5) Calendar control

17 Mar 2023 / 1 minute to read

You can change the format of the day that to be displayed in header using dayHeaderFormat property. By default, the format is Short.

You can find the possible formats on below.

Name	Description
`Short`	Sets the short format of day name (like Su ) in day header.
`Narrow`	Sets the single character of day name (like S ) in day header.
`Abbreviated`	Sets the min format of day name (like Sun ) in day header.
`Wide`	Sets the long format of day name (like Sunday ) in day header.

Source

Preview

index.js

index.html

styles.css

var calendarObject = new ej.calendars.Calendar({
        dayHeaderFormat: "Short"
    });
    calendarObject.appendTo('#element');

    var formatLabel = new ej.dropdowns.DropDownList({
        // set the height of the popup element
        popupHeight: '200px',
        // bind the change event
            change: function(args) {
                 calendarObject.dayHeaderFormat = args.value;
            }
    });
    formatLabel.appendTo('#select');

<!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">
    <link href="styles.css" rel="stylesheet">
   <!--style reference from the Calendar component-->
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet">     
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!--element which is going to render the Calendar-->
        <div id="element"></div>
    </div>
    <div id="format">
        <label class="custom-input-label">Header Format Types</label>
        <div id="wrapper">
            <select id="select" class="form-control">
                <option value="Short" selected="">Short</option>
                <option value="Narrow">Narrow</option>
                <option value="Abbreviated">Abbreviated</option>
                <option value="Wide">Wide</option>
            </select>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

#container {
    margin: 30px auto;
    width: 60%;
    display: inline-flex;
}

#format { 
    width: 30%;
    display: inline-block;
    margin-left: 8%;
}

#wrapper {
    height: 30px;
    width: 150px;
    margin-top: 10px;
}

.custom-input-label{
    font-size: 16px;
    font-weight: bold
}