Customization in EJ2 TypeScript Calendar

04 Sep 202611 minutes to read

Each day cell of the Calendar can be customized by using the renderDayCell
event.

The following section demonstrates how to disable or highlight specific dates in a Calendar.

Disable weekends

Weekends of every month can be disabled in the Calendar by using the renderDayCell event. The renderDayCell event offers the following arguments on each day cell creation to help disable the dates.

Argument Description
date Defines the current date of the Calendar.
isDisabled Specifies whether the current date is to be disabled or not.
isOutOfRange Defines whether the current date is out of range or not.

The following example demonstrates how to disable weekends of every month.

import { Calendar, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';
//Creates a calendar with weekends disabled.
let calendarObject: Calendar = new Calendar({
    renderDayCell: disabledDate,
    value: new Date()
});
calendarObject.appendTo('#element');

function disabledDate(args: RenderDayCellEventArgs): void {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        //Set 'true' to disable the weekends.
        args.isDisabled = true;
    }
}
<!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/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.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>
</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>

Day cell format

Specific dates can also be highlighted by adding custom CSS or an element to the day cell by using the renderDayCell event.

The appearance of the Calendar can be customized by overriding the existing styles. The following list of CSS class names are used to customize the Calendar component.

Class Name Description
e-calendar Applied to the Calendar.
e-header Applied to the header.
e-title Applied to the title.
e-icon-container Applied to the previous and next icon container.
e-prev Applied to the previous icon.
e-next Applied to the next icon.
e-weekend Applied to weekends.
e-other-month Applied to days of other months.
e-day Applied to each day cell.
e-selected Applied to the selected dates.
e-disabled Applied to the disabled dates.

The following example highlights the World Health Day (every 7th April) and World Forest Day (every 21st March) by using a
custom icon and Tooltip.

import { Calendar, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';

//Creates a Calendar with World Health Day and World Forest Day highlighted.
let calendarObject: Calendar = new Calendar({
    renderDayCell: customDates,
    value: new Date('03/10/2017')
});
calendarObject.appendTo('#element');

function customDates(args: RenderDayCellEventArgs): void {
    let span: HTMLElement;
    //Defines the custom HTML element to be added.
    span = document.createElement('span');
    //Uses "e-icons" class name to load Essential JS 2 built-in icons.
    span.setAttribute('class', 'e-icons highlight-day');
    if (+args.date.getDate() === 7 && +args.date.getMonth() == 3) {
        //Appends the span element to day cell.
        args.element.appendChild(span);
        //Sets the custom tooltip to the special dates.
        args.element.setAttribute('title', 'World health day!');
        //Uses "special" class name to highlight special dates that you can refer in "styles.css".
        args.element.className = 'special';
    }
    if (+args.date.getDate() === 21 && +args.date.getMonth() == 2) {
        args.element.appendChild(span);
        args.element.className = 'special';
        //Sets the custom tooltip to the special dates.
        args.element.setAttribute('title', 'World forest day');
    }
}
<!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/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />     
    <link href="https://cdn.syncfusion.com/ej2/34.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>
</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>

Highlight weekends

The weekends of every month can be highlighted in the Calendar by using the renderDayCell event. The following example demonstrates how to highlight the weekends of every month.

import { Calendar, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';
//Creates a calendar with weekends highlighted.
let calendarObject: Calendar = new Calendar({
    renderDayCell: highlightDate,
    value: new Date()
});
calendarObject.appendTo('#element');

function highlightDate(args: RenderDayCellEventArgs): void {
    if (args.date.getDay() === 0 || args.date.getDay() === 6) {
        // To highlight the week end of every month
       args.element.classList.add('e-highlightweekend');
    }
}
<!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/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.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>
</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>

See Also