How To

The following section explains how the Calendar can be easily customized in various aspects.

Set today and clear button

The following steps illustrate how to configure today and clear button in Calendar UI.

  • On created event of Calendar add the required elements to have clear and today button. Here we have used div with two Essential JS 2 Button component.

  • Use the e-footer class to the div tag to act as the footer.

  • And use the two button to select and clear the today date.

  • Bind the required event handler to the button tags to update the value.

Below is the code example

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

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

    public onCreated(): void {
        let proxy = this;
        let clearBtn = React.createElement("button",{className:"e-btn e-clear e-flat"},"Clear");
        let footerElement: HTMLElement = document.getElementsByClassName('e-footer-container')[0];
        footerElement.insertBefore(ReactDOM.render(clearBtn,document.createElement("div")),footerElement.childNodes[0]);
        document.querySelector(".e-clear").addEventListener("click",function(e){
            proxy.value = null;
        });
    }

    render() {
        return (
            <CalendarComponent id="calendar" created={this.onCreated} />
        );
     }
 }

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

Select a sequence of dates in Calendar

The following example demonstrates how to select the week dates of chosen date in the Calendar using values property, when isMultiSelection property is enabled. Methods of Moment.js is used in this sample for calculating the start and end of week from the selected date.

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

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

private calendarInstance: Calendar;

public onchange(args){
    let startOfWeek: any = moment(args.value).startOf('week');
    let endOfWeek: any = moment(args.value).endOf('week');
    if (this.calendarInstance.element.classList.contains('workweek')) {
        this.getWeekArray(startOfWeek.day(1) , endOfWeek.day(5)) ;
    } else if (this.calendarInstance.element.classList.contains("week")) {
        this.getWeekArray(startOfWeek, endOfWeek);
    }
}

public onworkweekChange(): void {
     if (this.calendarInstance.element.classList.contains('week')) {
        this.calendarInstance.element.classList.remove('week')
    }
    this.calendarInstance.element.classList.add('workweek');
}

public onweekChange(): void{
     if (this.calendarInstance.element.classList.contains('workweek')) {
         this.calendarInstance.element.classList.remove('workweek')
    }
    this.calendarInstance.element.classList.add('week');
}

public getWeekArray(startOfWeek,endOfWeek) {
    let days = [];
    let day = startOfWeek;
    while (day <= endOfWeek) {
        days.push(day.toDate());
        day = day.clone().add(1, 'd');
    }
   this.calendarInstance.values = days;
   }

    render() {
        return (
    <div id="app">
        <div className="wrap">
         <CalendarComponent id="calendar" isMultiSelection={true}  change={this.onchange.bind(this)} ref={(element) => { this.calendarInstance = element }} />
        </div>
        <div id="btncontainer" className="e-btn-group e-vertical">
            <ButtonComponent onClick={this.onweekChange.bind(this)} id="week" className="e-btn"> Week </ButtonComponent>
            <ButtonComponent onClick={this.onworkweekChange.bind(this)} id="workweek" className="e-btn"> Work Week </ButtonComponent>
    </div>
  </div>
  );
}
}
ReactDOM.render(<App />, document.getElementById('element'));

Skip a month in Calendar

The following example demonstrates how to skip a month in a Calendar while clicking the previous and next icon. Here we have used the navigated event to skip a month using NavigateTo method.

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

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

    //skips a month while cliking previous and next icon in month view.
    public onNavigate(args: NavigatedEventArgs){
        let date: Number;
        if ((event.currentTarget as HTMLElement).classList.contains('e-next')) {
            //increment the month while clicking the next icon
            date = args.date.setMonth(args.date.getMonth() + 1);
        }
        if ((event.currentTarget as HTMLElement).classList.contains('e-prev')) {
            //decrement the month while clicking the previous icon
            date = args.date.setMonth(args.date.getMonth() - 1);
        }
        if (args.view == 'month') {
            this.navigateTo('month', new Date(date));
        }
    }

    render() {
        return (
            <CalendarComponent navigated={this.onNavigate} />
        );
     }
 }

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

Show other months dates

The following example demonstrates how to show dates in other months.

The below styles show the Calendar’s other month dates to visibility from its hidden state.

.e-calendar .e-content tr.e-month-hide,
.e-calendar .e-content td.e-other-month>span.e-day {
    display: block;
}

.e-calendar .e-content td.e-month-hide,
.e-calendar .e-content td.e-other-month {
    pointer-events: auto;
    touch-action: auto;
}
Source
Preview
index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
//import the calendarcomponent
import { CalendarComponent} from '@syncfusion/ej2-react-calendars';

class App extends React.Component<{}, {}> {
    render() {
        return <CalendarComponent id="calendar" />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

Render Calendar with week number

You can enable the weekNumber in Calendar by using the weekNumber property.

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

class App extends React.Component<{}, {}> {
    render() {
        return <CalendarComponent id="calendar" weekNumber='true' />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

Change the first day of week

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

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

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

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

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

    private weekstart:number = 2;

    render() {
        return <CalendarComponent id="calendar" firstDayOfWeek={this.weekstart} />
    }
};
ReactDOM.render(<App />, document.getElementById('element'));