Search results

Calendar Mode in React Schedule component

The Scheduler supports the following two types of calendar mode.

  • Gregorian Calendar
  • Islamic Calendar

Gregorian Calendar

The Scheduler by default displays the gregorian calendar dates which is the most widely used calendar in the world. The Gregorian calendar is a solar calendar which has 12 months with 28 to 31 days each. A year which is divisible by four is said to be a leap year in this calendar mode. A leap year usually has 366 days whereas the regular year has 365 days.

Islamic Calendar

The Islamic Calendar, also known as the Hijri or Muslim calendar, is a lunar calendar which has 12 months in a year with 354 or 355 days. Each month of this calendar denotes the birth of the new lunar cycle and therefore, each month can have 29 or 30 days depending on the visibility of the moon. Here, the odd-numbered months have 30 days and the even months have 29 days.

The current Islamic year is 1440 AH. Usually the Gregorian calendar runs from approximately 11 September 2018 to 30 August 2019 for this 1440 AH year.

The Scheduler has a property calendarMode which is used to switch between the gregorian and islamic calendar modes. By default, it is set to Gregorian and to use it with Islamic calendar dates, define the calendarMode of Scheduler to Islamic. The following example depicts, how to display the Islamic calendar dates on Scheduler.

To make use of Islamic calendar in Scheduler, import the Calendar and Islamic module from ej2-calendars package and also inject it using the Calendar.Inject method. Apart from this, it requires the following CLDR data to be loaded using loadCldr function.

  • numberingSystems.json
  • ca-gregorian.json
  • numbers.json
  • timeZoneNames.json
  • ca-islamic.json

To know more information on, how to install the CLDR data, refer the Internationalization topic.

Source
Preview
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, Month, TimelineViews, Inject, ViewsDirective, ViewDirective } from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
import { Ajax, L10n, loadCldr } from '@syncfusion/ej2-base';
import * as numberingSystems from '../numberingSystems.json';
import * as gregorian from '../ca-gregorian.json';
import * as numbers from '../numbers.json';
import * as timeZoneNames from '../timeZoneNames.json';
import * as islamic from '../ca-islamic.json';
loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, islamic);
let localeTexts;
let ajax = new Ajax('../locale.json', 'GET', false);
ajax.onSuccess = (value) => {
    localeTexts = value;
};
ajax.send();
L10n.load(JSON.parse(localeTexts));
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = extend([], scheduleData, null, true);
        this.eventSettings = { dataSource: this.data };
    }
    render() {
        return <ScheduleComponent height='550px' showQuickInfo={false} selectedDate={new Date(2018, 1, 15)} locale='ar' eventSettings={this.eventSettings}>
        <ViewsDirective>
            <ViewDirective option='Day'/>
            <ViewDirective option='Week'/>
            <ViewDirective option='TimelineWorkWeek'/>
            <ViewDirective option='Month'/>
        </ViewsDirective>
        <Inject services={[Day, Week, Month, TimelineViews]}/>
        </ScheduleComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('schedule'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, Month, TimelineViews, Inject,
  ViewsDirective, ViewDirective} from '@syncfusion/ej2-react-schedule';
import { scheduleData } from './datasource';
import { extend } from '@syncfusion/ej2-base';
import { Ajax, L10n, loadCldr } from '@syncfusion/ej2-base';
import * as numberingSystems from '../numberingSystems.json';
import * as gregorian from '../ca-gregorian.json';
import * as numbers from '../numbers.json';
import * as timeZoneNames from '../timeZoneNames.json';
import * as islamic from '../ca-islamic.json';
loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, islamic);

let localeTexts: string;
let ajax: Ajax = new Ajax('../locale.json', 'GET', false);
ajax.onSuccess = (value: string) => {
    localeTexts = value;
};
ajax.send();
L10n.load(JSON.parse(localeTexts));

class App extends React.Component<{}, {}>{
    private data: Object[] = extend([], scheduleData, null, true) as Object[];
    private eventSettings: EventSettingsModel = { dataSource: this.data };
    render() {
        return <ScheduleComponent  height='550px' showQuickInfo= {false} selectedDate= {new Date(2018, 1, 15)} locale= 'ar' eventSettings= { this.eventSettings }>
        <ViewsDirective>
            <ViewDirective option='Day' />
            <ViewDirective option='Week' />
            <ViewDirective option='TimelineWorkWeek' />
            <ViewDirective option='Month' />
        </ViewsDirective>
        <Inject services={[Day, Week, Month, TimelineViews]} />
        </ScheduleComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('schedule'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Schedule</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-schedule/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='schedule'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

However, this feature does not yet support recurrence options, which we are planning to add them in the next release.