Schedule

Represents the Schedule component that displays a list of events scheduled against specific date and timings, thus helping us to plan and manage it properly.

<div id="schedule"></div>

<script>
  var scheduleObj = new Schedule();
  scheduleObj.appendTo("#schedule");
</script>

Properties

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.

    <div id="Schedule"> </div>

import { Schedule, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Agenda);

let scheduleObj: Schedule = new Schedule({
  views:['Agenda'],
  agendaDaysCount: 2
});
scheduleObj.appendTo('#Schedule');

Defaults to 7

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.

Defaults to false

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.

Defaults to true

allowInline

boolean

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

Defaults to false

allowKeyboardInteraction

boolean

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

Defaults to true

allowMultiCellSelection

boolean

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

Defaults to true

allowMultiDrag

boolean

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

Defaults to false

allowMultiRowSelection

boolean

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

Defaults to true

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.

Defaults to true

allowSwiping

boolean

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

Defaults to true

calendarMode

CalendarType

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

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  calendarMode: "Islamic"
});
scheduleObj.appendTo("#Schedule");

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

Defaults to ‘Gregorian’

cellHeaderTemplate

string | Function

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Month,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-schedule";
import { Internationalization } from "@syncfusion/ej2-base";

Schedule.Inject(Month, Resize, DragAndDrop);

let instance: Internationalization = new Internationalization();
(window as TemplateFunction).getDate = (date: Date) => {
  return instance.formatDate(date, { skeleton: "Ed" });
};
interface TemplateFunction extends Window {
    getDate?: Function;
}
let scheduleObj: Schedule = new Schedule({
  views: ['Month'],
  cellHeaderTemplate: '<div class="templatewrap">${getDate(data.date)}</div>'
});
scheduleObj.appendTo("#Schedule");

Defaults to null

cellTemplate

string | Function

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop,
} from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

(window as TemplateFunction).getMonthCellText = (date: Date) => {
  if (date.getDate() === 23) {
    return '<img src= "https://ej2.syncfusion.com/demos/src/schedule/images/birthday.svg" style="height:90%; width:90%" />';
  }
  return '';
};
(window as TemplateFunction).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/get-together.svg' style='height:90%; width:90%'/>";
  }
  return '';
};

interface TemplateFunction extends Window {
  getWorkCellText?: Function;
  getMonthCellText?: Function;
}

let scheduleObj: Schedule = new Schedule({
  cellTemplate:
    '${if(type === "workCells")}<div class="templatewrap">${getWorkCellText(data.date)}</div>${/if}${if(type === "monthCells")}<div class="templatewrap">${getMonthCellText(data.date)}</div>${/if}'
});
scheduleObj.appendTo('#Schedule');

Defaults to null

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  cssClass: 'schedule-cell-dimension'
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  currentView:'Month'
});
scheduleObj.appendTo("#Schedule");

Defaults to ‘Week’

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  dateFormat:'dd-MMM-yyyy'
});
scheduleObj.appendTo("#Schedule");

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.

Defaults to null

dateHeaderTemplate

string | Function

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-schedule";
import { Internationalization } from "@syncfusion/ej2-base";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let instance: Internationalization = new Internationalization();
(window as TemplateFunction).getDateHeaderText = (value: Date) => {
  return instance.formatDate(value, { skeleton: "Ed" });
};

interface TemplateFunction extends Window {
  getDateHeaderText?: Function;
}

let scheduleObj: Schedule = new Schedule({
  dateHeaderTemplate:
    '<div class="date-text">${getDateHeaderText(data.date)}</div>'
});
scheduleObj.appendTo("#Schedule");

Defaults to null

dateRangeTemplate

string | Function

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

Defaults to null

dayHeaderTemplate

string | Function

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.

Defaults to null

editorFooterTemplate

string | Function

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

Defaults to null

editorHeaderTemplate

string | Function

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

Defaults to null

editorTemplate

string | Function

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.

    	<div id="Schedule"> </div>

		<script id="EventEditorTemplate" type="text/x-template">
			<table class="custom-event-editor" width="100%" cellpadding="5">
        <tbody>
            <tr>
                <td class="e-textlabel">Summary</td>
                <td colspan="4">
                    <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />
                </td>
            </tr>
            <tr>
                <td class="e-textlabel">Status</td>
                <td colspan="4">
                    <input type="text" id="EventType" name="EventType" class="e-field" style="width: 100%" />
                </td>
            </tr>
            <tr>
            <td class="e-textlabel">From</td>
                <td colspan="4">
                    <input id="StartTime" class="e-field" type="text" name="StartTime" />
                </td>
            </tr>
            <tr>
                <td class="e-textlabel">To</td>
                <td colspan="4">
                    <input id="EndTime" class="e-field" type="text" name="EndTime" />
                </td>
            </tr>
            <tr>
                <td class="e-textlabel">Reason</td>
                <td colspan="4">
                    <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50"
                        style="width: 100%; height: 60px !important; resize: vertical"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
</script>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop,
  PopupOpenEventArgs
} from "@syncfusion/ej2-schedule";
import { Internationalization } from "@syncfusion/ej2-base";
import { DateTimePicker } from "@syncfusion/ej2-calendars";
import { DropDownList } from "@syncfusion/ej2-dropdowns";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  editorTemplate: "#EventEditorTemplate",
  popupOpen: (args: PopupOpenEventArgs) => {
    if (args.type === "Editor") {
      let statusElement: HTMLInputElement = args.element.querySelector(
        "#EventType"
      ) as HTMLInputElement;
      if (!statusElement.classList.contains("e-dropdownlist")) {
        let dropDownListObject: DropDownList = new DropDownList({
          placeholder: "Choose status",
          value: statusElement.value,
          dataSource: ["New", "Requested", "Confirmed"]
        });
        dropDownListObject.appendTo(statusElement);
      }
      let startElement: HTMLInputElement = args.element.querySelector(
        "#StartTime"
      ) as HTMLInputElement;
      if (!startElement.classList.contains("e-datetimepicker")) {
        new DateTimePicker(
          { value: new Date(startElement.value) || new Date() },
          startElement
        );
      }
      let endElement: HTMLInputElement = args.element.querySelector(
        "#EndTime"
      ) as HTMLInputElement;
      if (!endElement.classList.contains("e-datetimepicker")) {
        new DateTimePicker(
          { value: new Date(endElement.value) || new Date() },
          endElement
        );
      }
    }
  }
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

Defaults to false

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.

Defaults to false

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.

Defaults to true

enablePersistence

boolean

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

Defaults to false

enableRecurrenceValidation

boolean

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

Defaults to true

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  endHour: "18:00"
});
scheduleObj.appendTo("#Schedule");

Defaults to ‘24:00’

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  eventDragArea: "body"
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop,
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let data: object[] = [
  {
    Id:1,
    Subject: "Paris",
    StartTime: new Date(2023, 1, 15, 10, 0),
    EndTime: new Date(2023, 1, 15, 12, 30)
  }
];
let scheduleObj: Schedule = new Schedule({
  eventSettings: { dataSource: data }
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  firstDayOfWeek: 2
});
scheduleObj.appendTo("#Schedule");

Defaults to 0

firstMonthOfYear

number

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

<div id="Schedule"></div>

import { Schedule, TimelineYear, Year } from '@syncfusion/ej2-schedule';

Schedule.Inject(Year, TimelineYear);

let scheduleObj: Schedule = new Schedule({
  views: ['Year', 'TimelineYear'],
  firstMonthOfYear: 2
});
scheduleObj.appendTo("#Schedule");

Defaults to 0

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  group: {
    resources: ["Airlines"]
  },
  resources: [
    {
      field: "AirlineId",
      title: "Airline Name",
      name: "Airlines",
      allowMultiple: true,
      dataSource: [
        { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
        { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
        { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
      ],
      textField: "AirlineName",
      idField: "AirlineId",
      colorField: "AirlineColor"
    }
  ]
});
scheduleObj.appendTo("#Schedule");

Defaults to {}

headerIndentTemplate

string | Function

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.

    <div id="Schedule"> </div>

    <script id="indentTemplate" type="text/x-template">
        ${if (className == "e-header-cells")}
            <div class='template-wrap'>Template</div>
        ${/if}
    </script>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  headerIndentTemplate: "#indentTemplate",
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

    <div id="Schedule"> </div>

import { Schedule, TimelineViews } from "@syncfusion/ej2-schedule";

Schedule.Inject(TimelineViews);

let scheduleObj: Schedule = new Schedule({
  headerRows: [
    { option: "Year" },
    { option: "Month" },
    { option: "Week" },
    { option: "Date" },
    { option: "Hour" }
  ],
  views: ["TimelineWeek"]
});
scheduleObj.appendTo("#Schedule");

Defaults to []

height

string | number

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

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  height: "550px"
});
scheduleObj.appendTo("#Schedule");

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.

Defaults to ‘auto’

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.

Defaults to true

locale

string

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

Defaults to ”

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).

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  maxDate: new Date(2025, 1, 1)
});
scheduleObj.appendTo("#Schedule");

Defaults to new Date(2099, 11, 31)

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).

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  minDate: new Date(2020, 1, 1)
});
scheduleObj.appendTo("#Schedule");

Defaults to new Date(1900, 0, 1)

monthHeaderTemplate

string | Function

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.

Defaults to null

monthsCount

number

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

    <div id="Schedule"> </div>

import { Schedule, Year, TimelineYear } from '@syncfusion/ej2-schedule';

Schedule.Inject(Year, TimelineYear);

let scheduleObj: Schedule = new Schedule({
  views: ['TimelineYear', `Year`],
  monthsCount: 16
});
scheduleObj.appendTo('#Schedule');

Defaults to 12

quickInfoOnSelectionEnd

boolean

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

Defaults 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.

    <div id="Schedule"> </div>

    <script id="headerTemplate" type="text/x-template">
        <div>
            ${if (elementType === 'cell')}
            <div class="e-cell-header">
                <div class="e-header-icon-wrapper">
                    <button class="e-close" title="Close"></button>
                </div>
            </div>
            ${else}
            <div class="e-event-header">
                <div class="e-header-icon-wrapper">
                    <button class="e-close" title="CLOSE"></button>
                </div>
            </div>
            ${/if}
        </div>
    </script>
    <script id="contentTemplate" type="text/x-template">
        <div>
            ${if (elementType === 'cell')}
            <div class="e-cell-content">
                <form class="e-schedule-form">
                    <div>
                        <input class="subject e-field" type="text" name="Subject" placeholder="Title">
                    </div>
                    <div>
                        <input class="location e-field" type="text" name="Location" placeholder="Location">
                    </div>
                </form>
            </div>
            ${else}
            <div class="e-event-content">
                <div class="e-subject-wrap">
                    ${if (Subject)}
                    <div class="subject">${Subject}</div>${/if} ${if (City)}
                    <div class="location">${City}</div>${/if} ${if (Description)}
                    <div class="description">${Description}</div>${/if}
                </div>
            </div>
            ${/if}
        </div>
    </script>
    <script id="footerTemplate" type="text/x-template">
        <div>
            ${if (elementType === 'cell')}
            <div class="e-cell-footer">
                <button class="e-event-details" title="Additional Details">Additional Details</button>
                <button class="e-event-create" title="Add">Add</button>
            </div>
            ${else}
            <div class="e-event-footer">
                <button class="e-event-edit" title="Edit">Edit</button>
                <button class="e-event-delete" title="Delete">Delete</button>
            </div>
            ${/if}
        </div>
    </script>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  quickInfoTemplates: {
    header: "#headerTemplate",
    content: "#contentTemplate",
    footer: "#footerTemplate"
  }
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

Defaults to false

resourceHeaderTemplate

string | Function

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.

    <div id="Schedule"> </div>

    <script id="resourceTemplate" type="text/x-template">
        <div class='template-wrap'>
            <div class="resource-details">
                <div class="resource-name">${resourceData.text}</div>
                <div class="resource-designation">${resourceData.designation}</div>
            </div>
        </div>
    </script>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  resourceHeaderTemplate: '#resourceTemplate',
  group: {
    resources: ['Employees']
  },
  resources: [
    {
      field: 'EmpId',
      title: 'Employee',
      name: 'Employees',
      allowMultiple: true,
      dataSource: [
        { text: 'Nancy', id: 1, color: '#df5286', designation:'PO' },
        { text: 'Steven', id: 2, color: '#7fa900', designation:'Manager' },
        { text: 'Robert', id: 3, color: '#ea7a57', designation:'Team Lead' },
      ],
      textField: 'text',
      idField: 'id',
      groupIDField: 'groupId',
      colorField: 'color'
    },
  ],
});
scheduleObj.appendTo('#Schedule');

Defaults to null

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda,
  Resize,
  DragAndDrop
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  group: {
    resources: ["Airlines"]
  },
  resources: [
    {
      field: "AirlineId",
      title: "Airline Name",
      name: "Airlines",
      allowMultiple: true,
      dataSource: [
        { AirlineName: "Airways 1", AirlineId: 1, AirlineColor: "#EA7A57" },
        { AirlineName: "Airways 2", AirlineId: 2, AirlineColor: "#357cd2" },
        { AirlineName: "Airways 3", AirlineId: 3, AirlineColor: "#7fa900" }
      ],
      textField: "AirlineName",
      idField: "AirlineId",
      colorField: "AirlineColor"
    }
  ]
});
scheduleObj.appendTo("#Schedule");

Defaults to []

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.

Defaults to false

selectedDate

Date

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

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  selectedDate: new Date(2018, 3, 1)
});
scheduleObj.appendTo("#Schedule");

Defaults to ‘new Date()’

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.

Defaults to true

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.

Defaults 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.

Defaults to true

showWeekNumber

boolean

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

Defaults 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.

Defaults to true

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  startHour: "10:00"
});
scheduleObj.appendTo("#Schedule");

Defaults to ‘00:00’

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.

Defaults to null

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  timeScale: {
    enable: true,
    interval: 60,
    slotCount: 6
  }
});
scheduleObj.appendTo("#Schedule");

Defaults to { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  timezone: "UTC"
});
scheduleObj.appendTo("#Schedule");

Defaults to null

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  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' }
    ]
});
scheduleObj.appendTo("#Schedule");

Defaults to timezoneData

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.

Defaults to []

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:

Defaults to ’[“Day”, “Week”, “WorkWeek”, “Month”, “Agenda”]’

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.

    <div id="Schedule"> </div>

import { Schedule, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, DragEventArgs } from '@syncfusion/ej2-schedule';

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop);

let scheduleObj: Schedule = new Schedule({
  showWeekNumber: true,
  weekRule: 'FirstFourDayWeek'
});
scheduleObj.appendTo("#Schedule");

Defaults to ‘FirstDay’

width

string | number

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

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  width: '100%'
});
scheduleObj.appendTo("#Schedule");

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.

Defaults to ‘auto’

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  workDays: [1, 3, 5]
});
scheduleObj.appendTo("#Schedule");

Defaults to ’[1, 2, 3, 4, 5]’

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.

    <div id="Schedule"> </div>

import {
  Schedule,
  Day,
  Week,
  WorkWeek,
  Month,
  Agenda
} from "@syncfusion/ej2-schedule";

Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

let scheduleObj: Schedule = new Schedule({
  workHours: {
    highlight: true,
    start: "11:00",
    end: "20:00"
  }
});
scheduleObj.appendTo("#Schedule");

Defaults to { highlight: true, start: ‘09:00’, end: ‘18:00’ }

Methods

addEvent

Adds the newly created event into the Schedule dataSource.

Returns void

addEventListener

Adds the handler to the given event listener.

Returns void

addResource

Adds the resources to the specified index.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

changeCurrentView

Current View could be change based on the provided parameters.

Returns void

closeEditor

To manually close the event editor window

Returns void

closeQuickInfoPopup

To manually close the quick info popup

Returns void

closeTooltip

Closes the tooltip. For example, when the context menu is opened for an event, the tooltip can be closed by calling this method.

Returns void

collapseResource

This method allows to collapse the resource that available on the scheduler.

Returns void

copy

Method to copy events from an HTMLElement or an array of HTMLElements.

Returns void

cut

Method to cut events from an HTMLElement or an array of HTMLElements.

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

deleteEvent

Deletes the events based on the provided ID or event collection in the argument list.

Returns void

destroy

Destroys the Schedule component.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

expandResource

This method allows to expand the resource that available on the scheduler.

Returns void

exportToExcel

Allows the Scheduler events data to be exported as an Excel file either in .xlsx or .csv file formats. By default, the whole event collection bound to the Scheduler gets exported as an Excel file. To export only the specific events of Scheduler, you need to pass the custom data collection as a parameter to this exportToExcel method. This method accepts the export options as arguments such as fileName, exportType, fields, customData, and includeOccurrences. The fileName denotes the name to be given for the exported file and the exportType allows you to set the format of an Excel file to be exported either as .xlsx or .csv. The custom or specific field collection of event dataSource to be exported can be provided through fields option and the custom data collection can be exported by passing them through the customData option. There also exists option to export each individual instances of the recurring events to an Excel file, by setting true or false to the includeOccurrences option, denoting either to include or exclude the occurrences as separate instances on an exported Excel file.

Returns void

exportToICalendar

Exports the Scheduler events to a calendar (.ics) file. By default, the calendar is exported with a file name Calendar.ics. To change this file name on export, pass the custom string value as fileName to get the file downloaded with this provided name.

Returns void

generateEventOccurrences

Generates the occurrences of a single recurrence event based on the provided event.

Returns Record[]

getBlockEvents

Retrieves the entire collection of block events bound to the Schedule.

Returns Record[]

getCellDetails

Retrieves the start and end time information of the specific cell element.

Returns CellClickEventArgs

getCurrentViewDates

Retrieves the dates that lies on active view of Schedule.

Returns Date[]

getCurrentViewEvents

Retrieves the events that lies on the current date range of the active view of Schedule.

Returns Record[]

getCurrentViewIndex

Return the current view Index.

Returns number

getDateRangeText

Retrieves a formatted string representing the date range of the given date collection.

Returns string

getDeletedOccurrences

Get deleted occurrences from given recurrence series.

Returns Record[]

getEventDetails

To retrieve the appointment object from element.

Returns Record

getEventMaxID

Get the maximum id of an event.

Returns number | string

getEvents

Retrieves the entire collection of events bound to the Schedule.

Returns Record[]

getIndexFromResourceId

Select the resources to the based on id.

Returns number

getLocalData

Returns the persistence data for component

Returns any

getOccurrencesByID

Retrieves the occurrences of a single recurrence event based on the provided parent ID.

Returns Record[]

getOccurrencesByRange

Retrieves all the occurrences that lies between the specific start and end time range.

Returns Record[]

getResourceCollections

To get the resource collection

Returns ResourcesModel[]

getResourcesByIndex

Retrieves the resource details based on the provided resource index.

Returns ResourceDetails

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedElements

Retrieves the selected cell elements.

Returns Element[]

getViewDates

Retrieves an array of dates based on the specified date collection direction.

Returns Date[]

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hideSpinner

When the spinner is shown manually using showSpinner method, it can be hidden using this hideSpinner method.

Returns void

importICalendar

Imports the events from an .ics file downloaded from any of the calendars like Google or Outlook into the Scheduler. This method accepts the blob object or string format of an .ics file to be imported as a mandatory argument.

Returns void

isSlotAvailable

To check whether the given time range slots are available for event creation or already occupied by other events. This method currently focuses on validating appointments within the current view date range. However, it does not extend this availability check to recurrence occurrences outside of the current date range.

Returns boolean

openEditor

To manually open the event editor on specific time or on certain events.

Returns void

openQuickInfoPopup

To manually open the quick info popup based on cell or event details.

Returns void

paste

Method to create a paste event with clipboard data

Returns void

print

Method allows to print the scheduler.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshEvents

Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.

Returns void

refreshLayout

Refreshes the Schedule layout without re-render.

Returns void

refreshTemplates

Method to refresh the given Schedule templates

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removeResource

Removes the specified resource.

Returns void

resetWorkHours

Removes or resets different working hours on the required working days by accepting the required start and end time as well as the date collection as its parameters. if no parameters has been passed to this function, it will remove all the work hours.

Returns void

saveEvent

Updates the changes made in the event object by passing it as an parameter into the dataSource.

Returns void

scrollTo

Scrolls the Schedule content area to the specified time.

Returns void

scrollToResource

This method allows scroll to the position of the any resources that available on the scheduler. This method is applicable for without Agenda and Month agenda views of the schedule.

Returns void

selectResourceByIndex

Select the resource based on group index in mobile mode.

Returns void

setRecurrenceEditor

Set the recurrence editor instance from custom editor template.

Returns void

setResourceCollections

To set the resource collection

Returns void

setWorkHours

Sets different working hours on the required working days by accepting the required start and end time as well as the date collection as its parameters.

Returns void

showSpinner

Allows to show the spinner on schedule at the required scenarios.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

actionBegin

EmitType<ActionEventArgs>

Triggers on beginning of every scheduler action.

actionComplete

EmitType<ActionEventArgs>

Triggers on successful completion of the scheduler actions.

actionFailure

EmitType<ActionEventArgs>

Triggers when a scheduler action gets failed or interrupted and an error information will be returned.

beforePaste

EmitType<ReturnType>

Triggers once when pasting an event on the scheduler.

cellClick

EmitType<CellClickEventArgs>

Triggers when the scheduler cells are single clicked or on single tap on the same cells in mobile devices.

cellDoubleClick

EmitType<CellClickEventArgs>

Triggers when the scheduler cells are double clicked.

created

EmitType<Record>

Triggers after the scheduler component is created.

dataBinding

EmitType<ReturnType>

Triggers before the data binds to the scheduler.

dataBound

EmitType<ReturnType>

Triggers once the event data is bound to the scheduler.

destroyed

EmitType<Record>

Triggers when the scheduler component is destroyed.

drag

EmitType<DragEventArgs>

Triggers when an appointment is being in a dragged state.

dragStart

EmitType<DragEventArgs>

Triggers when an appointment is started to drag.

dragStop

EmitType<DragEventArgs>

Triggers when the dragging of appointment is stopped.

eventClick

EmitType<EventClickArgs>

Triggers when the events are single clicked or on single tapping the events on the mobile devices.

eventDoubleClick

EmitType<EventClickArgs>

Triggers when the events are double clicked or on double tapping the events on the desktop devices.

eventRendered

EmitType<EventRenderedArgs>

Triggers before each of the event getting rendered on the scheduler user interface.

hover

EmitType<HoverEventArgs>

Triggers when the scheduler elements are hovered.

moreEventsClick

EmitType<MoreEventsClickArgs>

Triggers when the more events indicator are clicked.

navigating

EmitType<NavigatingEventArgs>

Triggers before the date or view navigation takes place on scheduler.

popupClose

EmitType<PopupCloseEventArgs>

Triggers before any of the scheduler popups close on the page.

popupOpen

EmitType<PopupOpenEventArgs>

Triggers before any of the scheduler popups opens on the page.

renderCell

EmitType<RenderCellEventArgs>

Triggers before each element of the schedule rendering on the page.

resizeStart

EmitType<ResizeEventArgs>

Triggers when an appointment is started to resize.

resizeStop

EmitType<ResizeEventArgs>

Triggers when the resizing of appointment is stopped.

resizing

EmitType<ResizeEventArgs>

Triggers when an appointment is being in a resizing action.

select

EmitType<SelectEventArgs>

Triggers when multiple cells or events are selected on the Scheduler.

virtualScrollStart

EmitType<ScrollEventArgs>

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.