Triggers when the scroll action is started. This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.

virtualScrollStop
`EmitType<ScrollEventArgs>`

Triggers when the scroll action is stopped. This event triggers only when allowVirtualScrolling or enableLazyLoading properties are enabled along with resource grouping.

agendaDaysCount
`number`

Sets the number of days to be displayed by default in Agenda View and in case of virtual scrolling, the number of days will be fetched on each scroll-end based on this count.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent agendaDaysCount={1}>
    <ViewsDirective>
      <ViewDirective option='Agenda'/>
    </ViewsDirective>
    <Inject services={[Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

allowClipboard
`boolean`

Enables clipboard functionality for appointments, allowing them to be copied using keyboard shortcuts and pasted onto the Scheduler. When set to true, users can use keyboard shortcuts to cut, copy appointments and paste them into different time slots or calendars.

allowDragAndDrop
`boolean`

When set to true, allows the appointments to move over the time slots. When an appointment is dragged, both its start and end time tends to change simultaneously allowing it to reschedule the appointment on some other time.

allowInline
`boolean`

This property helps user to add/edit the event in inline. By default, it is set to false.

allowKeyboardInteraction
`boolean`

When set to true, allows the keyboard interaction to take place on Schedule.

allowMultiCellSelection
`boolean`

This property helps user to allow/prevent the selection of multiple cells. By default, it is set to true.

allowMultiDrag
`boolean`

This property helps to drag the multiple selected events. By default, it is set to false.

allowMultiRowSelection
`boolean`

This property helps user to allow/prevent the selection of multiple days(rows). By default, it is set to true.

allowOverlap
`boolean`

Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.

allowResizing
`boolean`

When set to true, allows the resizing of appointments. It allows the rescheduling of appointments either by changing the start or end time by dragging the event resize handlers.

allowSwiping
`boolean`

Defines whether to enable date navigations via swipe in touch devices or not.

calendarMode
`CalendarType`

It allows the Scheduler to display in other calendar modes. By default, Scheduler is displayed in Gregorian calendar mode.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent calendarMode="Islamic">
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

To change the mode, you can set either Gregorian or Islamic as a value to this calendarMode property.

cellHeaderTemplate
`string` | `function` | `JSX.Element`

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the month date cells. This template is only applicable for month view day cells.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Month, Inject, ViewsDirective, ViewDirective } from "@syncfusion/ej2-react-schedule";
import { Internationalization } from '@syncfusion/ej2-base';

function App() {
  const instance = new Internationalization();
  const getDateHeaderText = (props): JSX.Element => {
    return (<div>{instance.formatDate(props.date, { skeleton: "Ed" })}</div>);
  }
  return (<ScheduleComponent height='550px' cellHeaderTemplate={getDateHeaderText}>
    <ViewsDirective>
      <ViewDirective option='Month' />
    </ViewsDirective>
    <Inject services={[Month]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

cellTemplate
`string` | `function` | `JSX.Element`

The template option which is used to render the customized work cells on the Schedule. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the work cells. The fields accessible via template are as follows.

date: Returns the date of the cell.
groupIndex: Returns the group index of the cell.
type: Returns the type of the work cell. Refer to the below code snippet.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, TimelineViews, Month, Inject, ViewsDirective, 
ViewDirective, CellTemplateArgs } from '@syncfusion/ej2-react-schedule';

function App() {
  const getMonthCellContent = (date: Date) => {
    if (date.getMonth() === 10 && date.getDate() === 23) {
      return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" />';
    } else if (date.getDate() === 9) {
      return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/get-together.svg" />';
    }
    return '';
  }
  const getWorkCellText = (date: Date) => {
    let weekEnds: number[] = [0, 6];
    if (weekEnds.indexOf(date.getDay()) >= 0) {
      return "<img src='https://ej2.syncfusion.com/demos/src/schedule/images/newyear.svg' />";
    }
    return '';
  };
  const cellTemplate = (props: CellTemplateArgs): JSX.Element => {
    if (props.type === "workCells") {
      const workCellTemplate = { __html: getWorkCellText(props.date) };
      return (<div className="templatewrap" dangerouslySetInnerHTML= {workCellTemplate}></div>);
    }
    if (props.type === "monthCells") {
      const monthCellTemplate = { __html: getMonthCellContent(props.date) };
      return (<div className="templatewrap" dangerouslySetInnerHTML={monthCellTemplate}></div>);
    }
    return (<div></div>);
  }
  return <ScheduleComponent width='100%' height='550px' selectedDate={new Date(2017, 11, 15)} cellTemplate={cellTemplate}>
    <ViewsDirective>
      <ViewDirective option='Day' />
      <ViewDirective option='Week' />
      <ViewDirective option='TimelineWeek' />
      <ViewDirective option='Month' />
    </ViewsDirective>
    <Inject services={[Day, Week, TimelineViews, Month]} />
  </ScheduleComponent>
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

cssClass
`string`

It is used to customize the Schedule which accepts custom CSS class names that defines specific user-defined styles and themes to be applied on the Schedule element.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
    return (<ScheduleComponent cssClass='schedule-cell-dimension'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>
    </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

currentView
`View`

To set the active view on scheduler, the currentView property can be used and it usually accepts either of the following available view options. The view option specified in this property will be initially loaded on the schedule.

Day: Denotes Day view of the scheduler.
Week: Denotes Week view of the scheduler.
WorkWeek: Denotes Work Week view of the scheduler.
Month: Denotes Month view of the scheduler.
Year: Denotes Year view of the scheduler.
Agenda: Denotes Agenda view of the scheduler.
MonthAgenda: Denotes Month Agenda view of the scheduler.
TimelineDay: Denotes Timeline Day view of the scheduler.
TimelineWeek: Denotes Timeline Week view of the scheduler.
TimelineWorkWeek: Denotes Timeline Work Week view of the scheduler.
TimelineMonth: Denotes Timeline Month view of the scheduler.
TimelineYear: Denotes Timeline Year view of the scheduler.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
    return (
      <ScheduleComponent width='100%' height='550px' currentView='Agenda'>
        <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>
      </ScheduleComponent>
    )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

dateFormat
`string`

By default, Schedule follows the date-format as per the default culture assigned to it. It is also possible to manually set specific date format by using the dateFormat property.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return <ScheduleComponent height='550px' dateFormat="dd-MMM-yyyy">
    <Inject services={[Day, Week, WorkWeek, Month,  Resize, DragAndDrop]} />
  </ScheduleComponent>
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

The format of the date range label in the header bar depends on the dateFormat value or else based on the locale assigned to the Schedule.

dateHeaderTemplate
`string` | `function` | `JSX.Element`

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the date header cells. The field that can be accessed via this template is date.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Inject, TimelineViews, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';

function App() {
    const instance = new Internationalization();
    const getDateHeaderText = (value) => {
        return instance.formatDate(value, { skeleton: 'Ed' });
    }
    const getWeather = (value) => {
        switch (value.getDay()) {
            case 0:
                return '<div class="weather-text">25°C</div>';
            case 1:
                return '<div class="weather-text">18°C</div>';
            case 2:
                return '<div class="weather-text">10°C</div>';
            case 3:
                return '<div class="weather-text">16°C</div>';
            case 4:
                return '<div class="weather-text">8°C</div>';
            case 5:
                return '<div class="weather-text">27°C</div>';
            case 6:
                return '<div class="weather-text">17°C</div>';
            default:
                return null;
        }
    }
    const dateHeaderTemplate = (props) => {
        const dateTemplate = { __html: getWeather(props.date) };
        return (<div><div>{getDateHeaderText(props.date)}</div><div className="date-text" dangerouslySetInnerHTML={dateTemplate}></div>
        </div>);
    }
    return (<ScheduleComponent width='100%' height='550px' cssClass='schedule-date-header-template' selectedDate={new Date(2018, 1, 15)}  dateHeaderTemplate={dateHeaderTemplate}>
        <ViewsDirective>
            <ViewDirective option='Day' />
            <ViewDirective option='Week' />
            <ViewDirective option='WorkWeek' />
            <ViewDirective option='TimelineWeek' />
        </ViewsDirective>
        <Inject services={[Day, Week, WorkWeek, TimelineViews, Resize, DragAndDrop]} />
    </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

dateRangeTemplate
`string` | `function` | `JSX.Element`

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.

dayHeaderTemplate
`string` | `function` | `JSX.Element`

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the day header cells. This template is only applicable for year view header cells.

editorFooterTemplate
`string` | `function` | `JSX.Element`

The template option to render the customized footer of the editor window.

editorHeaderTemplate
`string` | `function` | `JSX.Element`

The template option to render the customized header of the editor window.

editorTemplate
`string` | `function` | `JSX.Element`

The template option to render the customized editor window. The form elements defined within this template should be accompanied with e-field class, so as to fetch and process it from internally.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ScheduleComponent, ViewsDirective, ViewDirective, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';
import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  const onPopupOpen = (args) => {
    if (args.type === 'Editor') {
      let statusElement = args.element.querySelector('#EventType');
      if (statusElement) {
        statusElement.setAttribute('name', 'EventType');
      }
    }
  }
  const eventEditorStyle = { width: "100%", cellpadding: "5"}
  const inputStyle = {width: "100%"}
  const DescriptionStyle = {width: "100%", height: "60px !important", resize: "vertical"}
  const editorTemplate = (props) => {
    return (props !== undefined ? <table className="custom-event-editor" style={eventEditorStyle}><tbody>
      <tr><td className="e-textlabel">Summary</td><td colSpan={4}>
        <input id="Summary" className="e-field e-input" type="text" name="Subject" style={inputStyle}/>
      </td></tr>
      <tr><td className="e-textlabel">Status</td><td colSpan={4}>
        <DropDownListComponent id="EventType" placeholder='Choose status' data-name="EventType" className="e-field" style={inputStyle} dataSource={['New', 'Requested', 'Confirmed']} value={props.EventType || null}></DropDownListComponent>
      </td></tr>
      <tr><td className="e-textlabel">From</td><td colSpan={4}>
        <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>
      </td></tr>
      <tr><td className="e-textlabel">To</td><td colSpan={4}>
        <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>
      </td></tr>
      <tr><td className="e-textlabel">Reason</td><td colSpan={4}>
        <textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style={DescriptionStyle}></textarea>
      </td></tr></tbody></table> : <div></div>);
  }
  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 1, 15)} editorTemplate={editorTemplate.bind(this)} showQuickInfo={false} popupOpen={onPopupOpen.bind(this)}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

enableAdaptiveUI
`boolean`

When set to true, the header view navigations are listed under the popup and if we enable resource grouping, the compact view will be enabled.

enableAllDayScroll
`boolean`

When set to true, If valid, the scroll on the all day row is activated when the all day row height reaches the max height when the all day row is expanded.

enableHtmlSanitizer
`boolean`

Specifies whether to enable the rendering of untrusted HTML values in the Schedule component. When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

enableRecurrenceValidation
`boolean`

The recurrence validation will be done by default. When this property is set to false, the recurrence validation will be skipped.

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

endHour
`string`

It is used to specify the end hour, at which the Schedule ends. It too accepts the time string in a short skeleton format.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent width='100%' height='550px' endHour='18:00'>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

eventDragArea
`string`

It enables the external drag and drop support for appointments on scheduler, to be able to move them out of the scheduler layout. When the drag area is explicitly set with specific DOM element name, the appointments can be dragged anywhere within the specified drag area location.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent width='100%' height='550px' eventDragArea='body'>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

eventSettings
`EventSettingsModel`

Complete set of settings related to Schedule events to bind it to local or remote dataSource, map applicable database fields and other validation to be carried out on the available fields.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useRef } from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  const scheduleObj = useRef<ScheduleComponent>(null);   
  const scheduleData: object[] = [
    {
        Subject: 'Paris',
        StartTime: new Date(2023, 1, 15, 10, 0),
        EndTime: new Date(2023, 1, 15, 12, 30)
    }
  ];
  const eventSettings = { dataSource: scheduleData };
  return (
    <ScheduleComponent ref={scheduleObj} height="550px" selectedDate={new Date(2023, 1, 15)} eventSettings={eventSettings}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
    </ScheduleComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

firstDayOfWeek
`number`

This option allows the user to set the first day of a week on Schedule. It should be based on the locale set to it and each culture defines its own first day of week values. If needed, the user can set it manually on his own by defining the value through this property. It usually accepts the integer values, whereby 0 is always denoted as Sunday, 1 as Monday and so on.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
    return (<ScheduleComponent firstDayOfWeek={2}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]}/>
    </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

firstMonthOfYear
`number`

This property helps render the year view customized months. By default, it is set to 0.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ViewsDirective, ViewDirective, Year, TimelineYear, Inject, Resize,
  DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent firstMonthOfYear={2}>
    <ViewsDirective>
      <ViewDirective option='Year'/>
      <ViewDirective option='TimelineYear'/>
    </ViewsDirective>
    <Inject services={[Year, TimelineYear, Resize, DragAndDrop]} />
  </ScheduleComponent>);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

group
`GroupModel`

Allows defining the group related settings of multiple resources. When this property is non-empty, it means that the resources will be grouped on the schedule layout based on the provided resource names.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Week, Month, TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective,
  ResourcesDirective, ResourceDirective, Inject, EventSettingsModel, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  const group = { resources: ['Airlines'] }
  const resourceData: Object[] =
    [
      { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
      { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
      { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
    ];
  return (
    <ScheduleComponent width='100%' height='550px' group={group}>
      <ResourcesDirective>
        <ResourceDirective field='AirlineId' title='Airline Name' name='Airlines' allowMultiple={true}
          dataSource={resourceData} textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
        </ResourceDirective>
      </ResourcesDirective>
      <Inject services={[Week, Month, TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

headerIndentTemplate
`string` | `function` | `JSX.Element`

Template option to customize the header indent bar. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell. Refer to the below code snippet.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { Day, Week, WorkWeek, Resize, DragAndDrop, ScheduleComponent, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  const headerIndentTemplate = (props) => {
     return props.className[0] == 'e-header-cells' ? (
      <div className="template-wrap">Template</div>
    ) : null;
  }
  return (<ScheduleComponent width='100%' height='550px' headerIndentTemplate={headerIndentTemplate}>
    <Inject services={[Day, Week, WorkWeek, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

headerRows
`HeaderRowsModel[]`

Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row on the timeline view of the scheduler.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, HeaderRowDirective, HeaderRowsDirective, TimelineViews, Inject,
  ViewsDirective, ViewDirective
} from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 11, 31)} startHour='09:00' endHour='13:00'>
    <HeaderRowsDirective>
      <HeaderRowDirective option='Year' />
      <HeaderRowDirective option='Month' />
      <HeaderRowDirective option='Week' />
      <HeaderRowDirective option='Date' />
      <HeaderRowDirective option='Hour' />
    </HeaderRowsDirective>
    <ViewsDirective>
      <ViewDirective option='TimelineWeek' />
    </ViewsDirective>
    <Inject services={[TimelineViews]} />
  </ScheduleComponent>)
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

height
`string` | `number`

Sets the height of the Schedule component, accepting both string and number values.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent height='550px'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
    </ScheduleComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

The string type includes either pixel or percentage values. When height is set with specific pixel value, then the Schedule will be rendered to that specified space. In case, if auto value is set, then the height of the Schedule gets auto-adjusted within the given container.

hideEmptyAgendaDays
`boolean`

The days which does not has even a single event to display will be hidden from the UI of Agenda View by default. When this property is set to false, the empty dates will also be displayed on the Schedule.

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

maxDate
`Date`

To define the maximum date on the Schedule, maxDate property can be defined. Usually, it defaults to the new Date(2099, 11, 31).

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent maxDate={new Date(2021, 0, 1)}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

minDate
`Date`

To define the minimum date on the Schedule, minDate property can be defined. Usually, it defaults to the new Date(1900, 0, 1).

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent minDate={new Date(2020,6,1)}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

monthHeaderTemplate
`string` | `function` | `JSX.Element`

It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the month header cells. This template is only applicable for year view header cells.

monthsCount
`number`

This option allows the user to set the number of months count to be displayed on the Schedule.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, ViewsDirective, ViewDirective, TimelineYear, Inject, Resize, 
DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (<ScheduleComponent monthsCount={16}>
    <ViewsDirective>
        <ViewDirective option='TimelineYear' ></ViewDirective>
    </ViewsDirective>
    <Inject services={[TimelineYear, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

overscanCount
`number`

Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling. This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.

quickInfoOnSelectionEnd
`boolean`

This property helps to show quick popup after multiple cell selection. By default, it is set to false.

quickInfoTemplates
`QuickInfoTemplatesModel`

The template option to customize the quick window. The three sections of the quick popup whereas the header, content, and footer can be easily customized with individual template option.

import { useRef } from 'react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, ResourcesDirective, ResourceDirective, Day, Week, WorkWeek, Month,
  Agenda, MonthAgenda, Inject, ResourcesModel, CellClickEventArgs, CurrentAction, EventSettingsModel
} from '@syncfusion/ej2-react-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const eventTypeObj = useRef<DropDownListComponent>(null);
  const titleObj = useRef<TextBoxComponent>(null);
  const notesObj = useRef<TextBoxComponent>(null);
  const scheduleObj = useRef<ScheduleComponent>(null);
  const intl: Internationalization = new Internationalization();
  const headerTemplate = (props: { [key: string]: Date }): JSX.Element => {
    return (
      <div className="quick-info-header">
        <div className="quick-info-header-content" style={getHeaderStyles(props)}>
          <div className="quick-info-title">{getHeaderTitle(props)}</div>
          <div className="duration-text">{getHeaderDetails(props)}</div>
        </div>
      </div>
    );
  }

  const contentTemplate = (props: { [key: string]: string }): JSX.Element => {
    return (
      <div className="quick-info-content">
        {props.elementType === 'cell' ?
          <div className="e-cell-content">
            <div className="content-area">
              <TextBoxComponent id="title" ref={titleObj} placeholder="Title" />
            </div>
            <div className="content-area">
              <DropDownListComponent id="eventType" ref={eventTypeObj} dataSource={roomData}
                fields= placeholder="Choose Type" index={0} popupHeight="200px" />
            </div>
            <div className="content-area">
              <TextBoxComponent id="notes" ref={notesObj} placeholder="Notes" />
            </div>
          </div>
          :
          <div className="event-content">
            <div className="meeting-type-wrap">
              <label>Subject</label>:
              <span>{props.Subject}</span>
            </div>
            <div className="meeting-subject-wrap">
              <label>Type</label>:
              <span>{getEventType(props)}</span>
            </div>
            <div className="notes-wrap">
              <label>Notes</label>:
              <span>{props.Description}</span>
            </div>
          </div>
        }
      </div>
    );
  }

  const footerTemplate = (props: { [key: string]: Object }): JSX.Element => {
    return (
      <div className="quick-info-footer">
        {props.elementType === "cell" ?
          <div className="cell-footer">
            <ButtonComponent id="more-details" cssClass='e-flat' content="More Details" onClick={buttonClickActions.bind(this)} />
            <ButtonComponent id="add" cssClass='e-flat' content="Add" isPrimary={true} onClick={buttonClickActions.bind(this)} />
          </div>
          :
          <div className="event-footer">
            <ButtonComponent id="delete" cssClass='e-flat' content="Delete" onClick={buttonClickActions.bind(this)} />
            <ButtonComponent id="more-details" cssClass='e-flat' content="More Details" isPrimary={true} onClick={buttonClickActions.bind(this).bind(this)} />
          </div>
        }
      </div>
    );
  }
  const roomData: { [key: string]: Object }[] = [
    { Name: 'Jammy', Id: 1, Capacity: 20, Color: '#ea7a57', Type: 'Conference' },
    { Name: 'Tweety', Id: 2, Capacity: 7, Color: '#7fa900', Type: 'Cabin' },
    { Name: 'Nestle', Id: 3, Capacity: 5, Color: '#5978ee', Type: 'Cabin' },
    { Name: 'Phoenix', Id: 4, Capacity: 15, Color: '#fec200', Type: 'Conference' },
    { Name: 'Mission', Id: 5, Capacity: 25, Color: '#df5286', Type: 'Conference' },
    { Name: 'Hangout', Id: 6, Capacity: 10, Color: '#00bdae', Type: 'Cabin' },
    { Name: 'Rick Roll', Id: 7, Capacity: 20, Color: '#865fcf', Type: 'Conference' },
    { Name: 'Rainbow', Id: 8, Capacity: 8, Color: '#1aaa55', Type: 'Cabin' },
    { Name: 'Swarm', Id: 9, Capacity: 30, Color: '#df5286', Type: 'Conference' },
    { Name: 'Photogenic', Id: 10, Capacity: 25, Color: '#710193', Type: 'Conference' }
  ];
  const quickInfoTemplates = {
    header: headerTemplate as any,
    content: contentTemplate as any,
    footer: footerTemplate as any
  };
  const getResourceData = (data: { [key: string]: Object }): { [key: string]: Object } => {
    const resources: ResourcesModel = scheduleObj.current.getResourceCollections().slice(-1)[0];
    const resourceData: { [key: string]: Object } = (resources.dataSource as Object[]).filter((resource: { [key: string]: Object }) =>
      resource.Id === data.RoomId)[0] as { [key: string]: Object };
    return resourceData;
  }

  const getHeaderStyles = (data: { [key: string]: Object }): Object => {
    if (data.elementType === 'cell') {
      return { alignItems: 'center', color: '#919191' };
    } else {
      const resourceData: { [key: string]: Object } = getResourceData(data);
      return { background: resourceData.Color, color: '#FFFFFF' };
    }
  }

  const getHeaderTitle = (data: { [key: string]: Object }): string => {
    return (data.elementType === 'cell') ? 'Add Appointment' : 'Appointment Details';
  }

  const getHeaderDetails = (data: { [key: string]: Date }): string => {
    return intl.formatDate(data.StartTime, { type: 'date', skeleton: 'full' }) + ' (' +
      intl.formatDate(data.StartTime, { skeleton: 'hm' }) + ' - ' +
      intl.formatDate(data.EndTime, { skeleton: 'hm' }) + ')';

  }

  const getEventType = (data: { [key: string]: string }): string => {
    const resourceData: { [key: string]: Object } = getResourceData(data);
    return resourceData.Name as string;
  }

  const buttonClickActions = (e: Event) => {
    const quickPopup: HTMLElement = scheduleObj.current.element.querySelector('.e-quick-popup-wrapper') as HTMLElement;
    const getSlotData: Function = (): { [key: string]: Object } => {
      const cellDetails: CellClickEventArgs = scheduleObj.current.getCellDetails(scheduleObj.current.getSelectedElements());
      const addObj: { [key: string]: Object } = {};
      addObj.Id = scheduleObj.current.getEventMaxID();
      addObj.Subject = titleObj.current.value;
      addObj.StartTime = new Date(+cellDetails.startTime);
      addObj.EndTime = new Date(+cellDetails.endTime);
      addObj.Description = notesObj.current.value;
      addObj.RoomId = eventTypeObj.current.value;
      return addObj;
    };
    if ((e.target as HTMLElement).id === 'add') {
      const addObj: { [key: string]: Object } = getSlotData();
      scheduleObj.current.addEvent(addObj);
    } else if ((e.target as HTMLElement).id === 'delete') {
      const eventDetails: { [key: string]: Object } = scheduleObj.current.activeEventData.event as { [key: string]: Object };
      let currentAction: CurrentAction = 'Delete';
      if (eventDetails.RecurrenceRule) {
        currentAction = 'DeleteOccurrence';
      }
      scheduleObj.current.deleteEvent(eventDetails, currentAction);
    } else {
      const isCellPopup: boolean = (quickPopup.firstElementChild as HTMLElement).classList.contains('e-cell-popup');
      const eventDetails: { [key: string]: Object } = isCellPopup ? getSlotData() :
        scheduleObj.current.activeEventData.event as { [key: string]: Object };
      let currentAction: CurrentAction = isCellPopup ? 'Add' : 'Save';
      if (eventDetails.RecurrenceRule) {
        currentAction = 'EditOccurrence';
      }
      scheduleObj.current.openEditor(eventDetails, currentAction, true);
    }
    scheduleObj.current.closeQuickInfoPopup();
  }

  return (
    <div className='schedule-control-section'>
      <div className='col-lg-12 control-section'>
        <div className='control-wrapper'>
          <ScheduleComponent id="schedule" cssClass='quick-info-template' ref={scheduleObj} height="650px"
            selectedDate={new Date(2020, 0, 9)} quickInfoTemplates={quickInfoTemplates}>
            <ResourcesDirective>
              <ResourceDirective field='RoomId' title='Room Type' name='MeetingRoom' textField='Name' idField='Id'
                colorField='Color' dataSource={roomData}></ResourceDirective>
            </ResourcesDirective>
            <Inject services={[Day, Week, WorkWeek, Month, Agenda, MonthAgenda]} />
          </ScheduleComponent>
        </div>
      </div>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

readonly
`boolean`

When set to true, makes the Schedule to render in a read only mode. No CRUD actions will be allowed at this time.

resourceHeaderTemplate
`string` | `function` | `JSX.Element`

Template option to customize the resource header bar. Here, the template accepts either the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells. The following can be accessible via template.

resource - All the resource fields.
resourceData - Object collection of current resource. Refer to the below code snippet.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import {
  Week, Month, TimelineViews, TimelineMonth, Agenda, ScheduleComponent, GroupModel, ViewsDirective, EventSettingsModel, ViewDirective, ResourceDetails, ResourcesDirective, ResourceDirective, Inject, TreeViewArgs
} from '@syncfusion/ej2-react-schedule';

function App() {
  const getDoctorName = (value: ResourceDetails | TreeViewArgs): string => {
    return (((value as ResourceDetails).resourceData) ?
      (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] :
      (value as TreeViewArgs).resourceName) as string;
  }

  const getDoctorLevel = (value: ResourceDetails | TreeViewArgs): string => {
    let resourceName: string = getDoctorName(value);
    return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';
  }
  const group: GroupModel = { resources: ['Doctors'] };

  const resourceData: Object[] = [
    { text: 'Will Smith', id: 1, color: '#ea7a57', designation: 'Cardioligst' },
    { text: 'Alice', id: 2, color: '#7fa900', designation: 'Neurologist' },
    { text: 'Robson', id: 3, color: '#7fa900', designation: 'Orthopedic Surgeon' }
  ];
  const resourceHeaderTemplate = (props): JSX.Element => {
    return (<div className="template-wrap">
      <div className="resource-detail"><div className="resource-name">{getDoctorName(props)}</div>
        <div className="resource-designation">{getDoctorLevel(props)}</div></div></div>
    );
  }
  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} currentView='WorkWeek' resourceHeaderTemplate={resourceHeaderTemplate} group={group}>
    <ResourcesDirective>
      <ResourceDirective field='DoctorId' title='Doctor' name='Doctors' dataSource={resourceData} textField='text' idField='id' DesignationField='designation' colorField='color' >
      </ResourceDirective>
    </ResourcesDirective>
    <ViewsDirective>
      <ViewDirective option='Week' />
      <ViewDirective option='Month' />
      <ViewDirective option='TimelineWeek' />
      <ViewDirective option='TimelineMonth' />
      <ViewDirective option='Agenda' />
    </ViewsDirective>
    <Inject services={[Week, Month, TimelineViews, TimelineMonth, Agenda]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

resources
`ResourcesModel[]`

Allows defining the collection of resources to be displayed on the Schedule. The resource collection needs to be defined with unique resource names to identify it along with the respective dataSource and field mapping options.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  Week, Month, TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective,
  ResourcesDirective, ResourceDirective, Inject, EventSettingsModel, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  const group = { resources: ['Airlines'] }
  const resourceData: Object[] =
    [
      { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
      { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
      { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
    ];
  return (
    <ScheduleComponent width='100%' height='550px' group={group}>
      <ResourcesDirective>
        <ResourceDirective field='AirlineId' title='Airline Name' name='Airlines' allowMultiple={true}
          dataSource={resourceData} textField='AirlineName' idField='AirlineId' colorField='AirlineColor'>
        </ResourceDirective>
      </ResourcesDirective>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

rowAutoHeight
`boolean`

when set to true, allows the height of the work-cells to adjust automatically based on the number of appointments present in those time ranges.

selectedDate
`Date`

To mark the active (current) date on the Schedule, selectedDate property can be defined. Usually, it defaults to the current System date.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent height='550px' selectedDate={new Date(2023, 1, 15)}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

showHeaderBar
`boolean`

When set to false, hides the header bar of the Schedule from UI. By default, the header bar holds the date and view navigation options, to which the user can add their own custom items onto it.

showQuickInfo
`boolean`

When set to true, displays a quick popup with cell or event details on single clicking over the cells or on events. By default, it is set to true.

showTimeIndicator
`boolean`

When set to false, hides the current time indicator from the Schedule. Otherwise, it visually depicts the live current system time appropriately on the user interface.

showWeekNumber
`boolean`

When set to true, displays the week number of the current view date range. By default, it is set to false.

showWeekend
`boolean`

When set to false, it hides the weekend days of a week from the Schedule. The days which are not defined in the working days collection are usually treated as weekend days. Note: By default, this option is not applicable on Work Week view. For example, if the working days are defined as [1, 2, 3, 4], then the remaining days of that week will be considered as the weekend days and will be hidden on all the views.

startHour
`string`

It is used to specify the starting hour, from which the Schedule starts to display. It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent startHour='10:00'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

timeFormat
`string`

By default, Schedule follows the time-format as per the default culture assigned to it. It is also possible to manually set specific time format by using the timeFormat property.

timeScale
`TimeScaleModel`

Allows to set different time duration on Schedule along with the customized grid count. It also has template option to customize the time slots with required time values in its own format.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App () {
  const timeScale = { enable: true, interval: 60, slotCount: 6 };
  return (
    <ScheduleComponent timeScale={timeScale}>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

timezone
`string`

Schedule will be assigned with specific timezone, so as to display the events in it accordingly. By default, Schedule dates are processed with System timezone, as no timezone will be assigned specifically to the Schedule at the initial time. Whenever the Schedule is bound to remote data services, it is always recommended to set specific timezone to Schedule to make the events on it to display on the same time irrespective of the system timezone. It usually accepts the valid IANA timezone names.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent timezone="UTC">
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  )
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

timezoneDataSource
`TimezoneFields[]`

Allows to define the collection of timezone items in the Schedule. Only the items bound to this property get listed out in the timezone dropdown of the appointment window.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, EventSettingsModel, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  const data: object[] = [{
    Id: 1,
    Subject: 'Explosion of Betelgeuse Star',
    StartTime: new Date(2023, 1, 15, 10, 0),
    EndTime: new Date(2023, 1, 15, 12, 30)
  }, {
    Id: 2,
    Subject: 'Blue Moon Eclipse',
    StartTime: new Date(2023, 1, 16, 12, 0),
    EndTime: new Date(2023, 1, 16, 13, 0)
  }];
  const eventSettings: EventSettingsModel = { dataSource: data };

  return (<ScheduleComponent height='550px'
    selectedDate={new Date(2023, 1, 15)}
    eventSettings={eventSettings}
    timezoneDataSource={[
      { Value: 'Pacific/Niue', Text: 'Niue' },
      { Value: 'Pacific/Pago_Pago', Text: 'Pago Pago' },
      { Value: 'Pacific/Honolulu', Text: 'Hawaii Time' },
      { Value: 'Pacific/Rarotonga', Text: 'Rarotonga' },
      { Value: 'Pacific/Tahiti', Text: 'Tahiti' },
    ]}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

toolbarItems
`ToolbarItemModel[]`

To render the custom toolbar items, the toolbarItems property can be used. It contains built-in and custom toolbar items. To avail the built-in toolbar items, the below string values are assigned to the name property of the ToolbarItemModel.

Previous: Schedule component navigates to the previous date from the current date.
Next: Schedule component navigates to the next date from the current date.
Today: Schedule component navigates to the current date from any date.
Views: Schedule component render the defined view options in the toolbar. If view option is not defined, then it will render default view options in the Schedule.
DateRangeText: Schedule component displays the current date text range.
NewEvent: Schedule component render the icon to add a new event.

views
`View[]` | `ViewsModel[]`

This property holds the views collection and its configurations. It accepts either the array of view names or the array of view objects that holds different configurations for each views. By default, Schedule displays all the views namely Day, Week, Work Week, Month and Agenda. Example for array of views:

Example for array of view objects:

weekRule
`WeekRule`

It allows the Scheduler to display week numbers based on following available week options. The week option specified in this property will be initially loaded on the schedule.

FirstDay: Denotes that the first week of the year starts on the first day of the year and ends before the following designated first day of the week.
FirstFourDayWeek:Denotes that the first week of the year is the first week with four or more days before the designated first day of the week.
FirstFullWeek: Denotes that the first week of the year begins on the first occurrence of the designated first day of the week on or after the first day of the year.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject, Resize, DragAndDrop } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent showWeekNumber={true} weekRule='FirstFourDayWeek'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
    </ScheduleComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

width
`string` | `number`

Sets the width of the Schedule component, accepting both string and number values.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '@syncfusion/ej2-react-schedule';

function App() {
  return (
    <ScheduleComponent width='100%'>
      <Inject services={[Day, Week, WorkWeek, Month, Agenda]} />
    </ScheduleComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

The string value can be either pixel or percentage format. When set to auto, the Schedule width gets auto-adjusted and display its content related to the viewable screen size.

workDays
`number[]`

It is used to set the working days on Schedule. The only days that are defined in this collection will be rendered on the workWeek view whereas on other views, it will display all the usual days and simply highlights the working days with different shade.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Week, WorkWeek, Day, Inject, Month, Agenda, EventSettingsModel, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  const workingDays: number[] = [1, 3, 5];
  return (<ScheduleComponent workDays={workingDays} >
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

workHours
`WorkHoursModel`

The working hours should be highlighted on Schedule with different color shade and an additional option must be provided to highlight it or not. This functionality is handled through workHours property and the start work hour should be 9 AM by default and end work hour should point to 6 PM. The start and end working hours needs to be provided as Time value of short skeleton type.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ScheduleComponent, Week, WorkWeek, Day, Inject, Month, Agenda, EventSettingsModel, Resize, DragAndDrop
} from '@syncfusion/ej2-react-schedule';

function App() {
  const workHours: WorkHoursModel = {
    highlight: true, start: '11:00', end: '20:00'
  };

  return (<ScheduleComponent workHours={workHours}>
    <Inject services={[Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop]} />
  </ScheduleComponent>)
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Contents

Properties
actionBegin
actionComplete
actionFailure
beforePaste
beforePrint
cellClick
cellDoubleClick
created
dataBinding
dataBound
destroyed
drag
dragStart
dragStop
eventClick
eventDoubleClick
eventRendered
excelExport
hover
moreEventsClick
navigating
popupClose
popupOpen
renderCell
resizeStart
resizeStop
resizing
select
tooltipOpen
virtualScrollStart
virtualScrollStop
agendaDaysCount
allowClipboard
allowDragAndDrop
allowInline
allowKeyboardInteraction
allowMultiCellSelection
allowMultiDrag
allowMultiRowSelection
allowOverlap
allowResizing
allowSwiping
calendarMode
cellHeaderTemplate
cellTemplate
cssClass
currentView
dateFormat
dateHeaderTemplate
dateRangeTemplate
dayHeaderTemplate
editorFooterTemplate
editorHeaderTemplate
editorTemplate
enableAdaptiveUI
enableAllDayScroll
enableHtmlSanitizer
enablePersistence
enableRecurrenceValidation
enableRtl
endHour
eventDragArea
eventSettings
firstDayOfWeek
firstMonthOfYear
group
headerIndentTemplate
headerRows
height
hideEmptyAgendaDays
locale
maxDate
minDate
monthHeaderTemplate
monthsCount
overscanCount
quickInfoOnSelectionEnd
quickInfoTemplates
readonly
resourceHeaderTemplate
resources
rowAutoHeight
selectedDate
showHeaderBar
showQuickInfo
showTimeIndicator
showWeekNumber
showWeekend
startHour
timeFormat
timeScale
timezone
timezoneDataSource
toolbarItems
views
weekRule
width
workDays
workHours

Contents

Properties
actionBegin
actionComplete
actionFailure
beforePaste
beforePrint
cellClick
cellDoubleClick
created
dataBinding
dataBound
destroyed
drag
dragStart
dragStop
eventClick
eventDoubleClick
eventRendered
excelExport
hover
moreEventsClick
navigating
popupClose
popupOpen
renderCell
resizeStart
resizeStop
resizing
select
tooltipOpen
virtualScrollStart
virtualScrollStop
agendaDaysCount
allowClipboard
allowDragAndDrop
allowInline
allowKeyboardInteraction
allowMultiCellSelection
allowMultiDrag
allowMultiRowSelection
allowOverlap
allowResizing
allowSwiping
calendarMode
cellHeaderTemplate
cellTemplate
cssClass
currentView
dateFormat
dateHeaderTemplate
dateRangeTemplate
dayHeaderTemplate
editorFooterTemplate
editorHeaderTemplate
editorTemplate
enableAdaptiveUI
enableAllDayScroll
enableHtmlSanitizer
enablePersistence
enableRecurrenceValidation
enableRtl
endHour
eventDragArea
eventSettings
firstDayOfWeek
firstMonthOfYear
group
headerIndentTemplate
headerRows
height
hideEmptyAgendaDays
locale
maxDate
minDate
monthHeaderTemplate
monthsCount
overscanCount
quickInfoOnSelectionEnd
quickInfoTemplates
readonly
resourceHeaderTemplate
resources
rowAutoHeight
selectedDate
showHeaderBar
showQuickInfo
showTimeIndicator
showWeekNumber
showWeekend
startHour
timeFormat
timeScale
timezone
timezoneDataSource
toolbarItems
views
weekRule
width
workDays
workHours

ScheduleModel API in React Schedule API component

Properties

actionBegin EmitType<ActionEventArgs>

actionComplete EmitType<ActionEventArgs>

actionFailure EmitType<ActionEventArgs>

beforePaste EmitType<BeforePasteEventArgs>

beforePrint EmitType<BeforePrintEventArgs>

cellClick EmitType<CellClickEventArgs>

cellDoubleClick EmitType<CellClickEventArgs>

created EmitType<Record>

dataBinding EmitType<ReturnType>

dataBound EmitType<ReturnType>

destroyed EmitType<Record>

drag EmitType<DragEventArgs>

dragStart EmitType<DragEventArgs>

dragStop EmitType<DragEventArgs>

eventClick EmitType<EventClickArgs>

eventDoubleClick EmitType<EventClickArgs>

eventRendered EmitType<EventRenderedArgs>

excelExport EmitType<ExcelExportEventArgs>

hover EmitType<HoverEventArgs>

moreEventsClick EmitType<MoreEventsClickArgs>

navigating EmitType<NavigatingEventArgs>

popupClose EmitType<PopupCloseEventArgs>

popupOpen EmitType<PopupOpenEventArgs>

renderCell EmitType<RenderCellEventArgs>

resizeStart EmitType<ResizeEventArgs>

resizeStop EmitType<ResizeEventArgs>

resizing EmitType<ResizeEventArgs>

select EmitType<SelectEventArgs>

tooltipOpen EmitType<TooltipOpenEventArgs>

virtualScrollStart EmitType<ScrollEventArgs>

virtualScrollStop EmitType<ScrollEventArgs>

agendaDaysCount number

allowClipboard boolean

allowDragAndDrop boolean

allowInline boolean

allowKeyboardInteraction boolean

allowMultiCellSelection boolean

allowMultiDrag boolean

allowMultiRowSelection boolean

allowOverlap boolean

allowResizing boolean

allowSwiping boolean

calendarMode CalendarType

cellHeaderTemplate string | function | JSX.Element

cellTemplate string | function | JSX.Element

cssClass string

currentView View

dateFormat string

dateHeaderTemplate string | function | JSX.Element

dateRangeTemplate string | function | JSX.Element

dayHeaderTemplate string | function | JSX.Element

editorFooterTemplate string | function | JSX.Element

editorHeaderTemplate string | function | JSX.Element

editorTemplate string | function | JSX.Element

enableAdaptiveUI boolean

enableAllDayScroll boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableRecurrenceValidation boolean

enableRtl boolean

endHour string

eventDragArea string

eventSettings EventSettingsModel

firstDayOfWeek number

firstMonthOfYear number

group GroupModel

headerIndentTemplate string | function | JSX.Element

headerRows HeaderRowsModel[]

height string | number

hideEmptyAgendaDays boolean

locale string

maxDate Date

minDate Date

monthHeaderTemplate string | function | JSX.Element

monthsCount number

overscanCount number

quickInfoOnSelectionEnd boolean

quickInfoTemplates QuickInfoTemplatesModel

actionBegin
`EmitType<ActionEventArgs>`

actionComplete
`EmitType<ActionEventArgs>`

actionFailure
`EmitType<ActionEventArgs>`

beforePaste
`EmitType<BeforePasteEventArgs>`

beforePrint
`EmitType<BeforePrintEventArgs>`

cellClick
`EmitType<CellClickEventArgs>`

cellDoubleClick
`EmitType<CellClickEventArgs>`

created
`EmitType<Record>`

dataBinding
`EmitType<ReturnType>`

dataBound
`EmitType<ReturnType>`

destroyed
`EmitType<Record>`

drag
`EmitType<DragEventArgs>`

dragStart
`EmitType<DragEventArgs>`

dragStop
`EmitType<DragEventArgs>`

eventClick
`EmitType<EventClickArgs>`

eventDoubleClick
`EmitType<EventClickArgs>`

eventRendered
`EmitType<EventRenderedArgs>`

excelExport
`EmitType<ExcelExportEventArgs>`

hover
`EmitType<HoverEventArgs>`

moreEventsClick
`EmitType<MoreEventsClickArgs>`

navigating
`EmitType<NavigatingEventArgs>`

popupClose
`EmitType<PopupCloseEventArgs>`

popupOpen
`EmitType<PopupOpenEventArgs>`

renderCell
`EmitType<RenderCellEventArgs>`

resizeStart
`EmitType<ResizeEventArgs>`

resizeStop
`EmitType<ResizeEventArgs>`

resizing
`EmitType<ResizeEventArgs>`

select
`EmitType<SelectEventArgs>`

tooltipOpen
`EmitType<TooltipOpenEventArgs>`

virtualScrollStart
`EmitType<ScrollEventArgs>`