Search results

Customization

Calendar allows you to customize the entire appearance by using the custom CSS and renderDayCell event to customize the each day cell.

This following section demonstrates how to disable, highlights the specific dates in the Calendar.

Disable Weekends

You can disable the weekends of every month in a Calendar by using the renderDayCell event. The isDisabled argument from this event allows you to define whether the date to be disabled or not.

Set isDisabled to true to disable the date value.

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

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the calendarcomponent
import { CalendarComponent, RenderDayCellEventArgs} from '@syncfusion/ej2-react-calendars';

class App extends React.Component<{}, {}> {

    //initialize the value
    private dateValue: Date = new Date();

    public disabledDate(args: RenderDayCellEventArgs): void {
        if (args.date.getDay() === 0 || args.date.getDay() === 6) {
            //set 'true' to disable the weekends
            args.isDisabled = true;
        }
    }

    render() {
        return <CalendarComponent id="calendar" renderDayCell={this.disabledDate} value={this.dateValue} />
    }

};
ReactDOM.render(<App />, document.getElementById('element'));

Day Cell Format

You can highlight the specific dates by adding the custom CSS or element to the day cell by using renderDayCell.

Below is the list of classes that provides the flexible way to customize the Calendar component.

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

The following example highlights the world health date (7th April every year) and world forest day (21st March every year) in the Calendar by using the custom icon and tooltip.

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the calendarcomponent
import { CalendarComponent, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';

class App extends React.Component<{}, {}> {
     //initialize the value
    private dateValue: Date = new Date('03/10/2017');

    public customDates(args: RenderDayCellEventArgs): void {
        let span: HTMLElement;
        //defines the custom HTML element to be added.
        span = document.createElement('span');
        //Use "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) {
            //append the span element to day cell.
            args.element.appendChild(span);
            //set the custom tooltip to the special dates.
            args.element.setAttribute('title', 'World health day!');
            //Use "special" class name to highlight the special dates, which 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';
            //set the custom tooltip to the special dates.
            args.element.setAttribute('title', 'World forest day');
        }
    }

    render() {
        return <CalendarComponent id="calendar" renderDayCell={this.customDates} value={this.dateValue} />
    }
};

ReactDOM.render(<App />, document.getElementById('element'));

Highlight Weekends

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

Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the calendarcomponent
import { CalendarComponent, RenderDayCellEventArgs} from '@syncfusion/ej2-react-calendars';

class App extends React.Component<{}, {}> {

    //initialize the value
    private dateValue: Date = new Date();

    public highlightWeekend(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');
        }
    }

    render() {
        return <CalendarComponent id="calendar" renderDayCell={this.highlightWeekend} value={this.dateValue} />
    }

};
ReactDOM.render(<App />, document.getElementById('element'));