Migration from Essential® JS 1

8 Dec 202424 minutes to read

This topic shows the API equivalent of JS2 Scheduler component to be used, while migrating your project that uses JS1 Scheduler.

Scheduler

Properties

Behavior API in Essential® JS 1 API in Essential® JS 2
To change the display of days count in agenda view Property: days-in-agenda

<ej-schedule id="schedule" current-view='Agenda'>
<e-agenda-view-settings days-in-agenda="5"></e-agenda-view-settings>
</ej-schedule> 		Property: agendaDaysCount

<ejs-schedule id="scheduler" currentView="Agenda" agendaDaysCount=5>
</ejs-schedule>
Preventing deletion of appointment Property: allow-delete

<ej-schedule id="schedule" allow-delete="false">
</ej-schedule> 		Not applicable
Allows dragging and dropping of appointments Property: allow-drag-and-drop

<ej-schedule id="schedule" allow-drag-and-drop="false">
</ej-schedule> 		Property: allowDragAndDrop

<ejs-schedule id="scheduler" allowDragAndDrop="false">
</ejs-schedule>
Enabling inline editing of appointments Property: allow-inline

<ej-schedule id="schedule" allow-inline="true">
</ej-schedule> 		Not applicable
Allow keyboard interactions Property: allow-keyboard-navigation

<ej-schedule id="schedule" allow-keyboard-navigation="false">
</ej-schedule> 		Property: allowKeyboardInteraction

<ejs-schedule id="scheduler" allowKeyboardInteraction="false">
</ejs-schedule>
Enable resizing of appointments Property: enable-appointment-resize

<ej-schedule id="schedule" enable-appointment-resize="false">
</ej-schedule> 		Property: allowResizing

<ejs-schedule id="scheduler" allowResizing="false">
</ejs-schedule>
Blocking time intervals Property: e-blockout-settings

<ej-schedule id="schedule" allow-delete="false">
<e-blockout-settings enable="true" datasource="blockData" id="Id" subject="Subject" start-time="StartTime" end-time="EndTime" is-block-appointment="IsBlockAppointment"></e-blockout-settings>
</ej-schedule> 		Property: IsBlock

public class BlockData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public bool IsBlock { get; set; }
}
Categorizing the appointments Property: e-categorize-settings

<ej-schedule id="schedule" allow-delete="false">
<e-categorize-settings enable="true" allow-multiple="true" datasource="CategorizeValue" id="Id" text="Text" color="Color" font-color="FontColor"></e-categorize-settings>
</ej-schedule> 		Not applicable
Setting cell height Property: cell-height

<ej-schedule id="schedule" cell-height="30px">
</ej-schedule> 		Not applicable
Cell template Property: work-cells-template-id

<ej-schedule id="schedule" all-day-cells-template-id="#alldayTemplate" work-cells-template-id="#workTemplate">
</ej-schedule> 		Property: cellTemplate

<ejs-schedule id="scheduler" cellTemplate="@template">
</ejs-schedule>
Setting cell width Property: cell-width

<ej-schedule id="schedule" cell-width="40px">
</ej-schedule> 		Not applicable
CSS class Property: css-class

<ej-schedule id="schedule" css-class="customStyle">
</ej-schedule> 		Property: cssClass

<ejs-schedule id="scheduler" cssClass="customStyle">
</ejs-schedule>
Enabling Context-menu option Property: e-context-menu-settings

<ej-schedule id="schedule">
<e-context-menu-settings enable="true">
<e-menu-items>
<e-appointment-collection>
<e-appointment id="open" text="Open Appointment" />
<e-appointment id="delete" text="Delete Appointment" />
</e-appointment-collection>
<e-cells-collection>
<e-cells id="new" text="New Appointment" />
<e-cells id="recurrence" text="New recuring Appointment" />
</e-cells-collection>
</e-menu-items>
</e-context-menu-settings>
</ej-schedule> 		Not applicable
Current view Property: current-view

<ej-schedule id="schedule" current-view="Day">
</ej-schedule> 		Property: currentView

<ejs-schedule id="scheduler" currentView="Day">
</ejs-schedule>
Date format Property: date-format

<ej-schedule id="schedule" date-format="yyyy/MM/dd">
</ej-schedule> 		Property: dateFormat

<ejs-schedule id="scheduler" dateFormat="yyyy/MM/dd">
</ejs-schedule>
Date header template Property: date-header-template-id

<ej-schedule id="schedule" date-header-template-id="#dateTemplate">
</ej-schedule> 		Property: dateHeaderTemplate

<ejs-schedule id="scheduler" dateHeaderTemplate="@template">
</ejs-schedule>
Editor template Not Applicable Property: editorTemplate

<ejs-schedule id="scheduler" editorTemplate="@template">
</ejs-schedule>
Enable load on demand Property: enable-load-on-demand

<ej-schedule id="schedule" enable-load-on-demand="true">
</ej-schedule> 		Not applicable
Enable persistence Property: enable-persistence

<ej-schedule id="schedule" enable-persistence="true">
</ej-schedule> 		Property: enablePersistence

<ejs-schedule id="scheduler" enablePersistence="true">
</ejs-schedule>
Enable RTL Property: enable-RTL

<ej-schedule id="schedule" enable-RTL="true">
</ej-schedule> 		Property: enableRTL

<ejs-schedule id="scheduler" enableRTL="true">
</ejs-schedule>
Setting end hour of the scheduler Property: end-hour

<ej-schedule id="schedule" end-hour="18">
</ej-schedule> 		Property: endHour

<ejs-schedule id="scheduler" endHour="20:00">
</ejs-schedule>
Setting first day of the week Property: first-day-of-week

<ej-schedule id="schedule" first-day-of-week="DayOfWeek.Monday">
</ej-schedule> 		Property: firstDayOfWeek

<ejs-schedule id="scheduler" firstDayOfWeek=1>
</ejs-schedule>
Height of the scheduler Property: height

<ej-schedule id="schedule" height="550px">
</ej-schedule> 		Property: height

<ejs-schedule id="scheduler" height="550px">
</ejs-schedule>
Locale Property: locale

<ej-schedule id="schedule" locale="fr-FR">
</ej-schedule> 		Property: locale

<ejs-schedule id="scheduler" locale="fr-FR">
</ejs-schedule>
Priority settings for appointments Property: e-priority-settings

<ej-schedule id="schedule" allow-delete="false">
<e-priority-settings enable="true" datasource="PriorityValue" text="Text" value="Value"></e-priority-settings>
</ej-schedule> 		Not applicable
Read only Property: read-only

<ej-schedule id="schedule" read-only="true">
</ej-schedule> 		Property: readonly

<ejs-schedule id="scheduler" readonly="true">
</ejs-schedule>
Reminder settings Property: e-reminder-settings

<ej-schedule id="schedule" allow-delete="false">
<e-reminder-settings enable="true" alert-before="10"></e-reminder-settings>
</ej-schedule> 		Not applicable
Resource header template Property: resource-header-template-id

<ej-schedule id="schedule" resource-header-template-id="#resTemplate">
<e-resources>
<e-resource field="OwnerId" title="Owner" name="Owners" allow-multiple=true>
<e-resource-settings datasource="@ViewBag.OwnerData" text="Text" id="Id" group-id="GroupId" color="Color"></e-resource-settings>
</e-resource>
</e-resources>
</ej-schedule> 		Property: resourceHeaderTemplate

<ejs-schedule id="scheduler" resourceHeaderTemplate="#resTemplate">
<e-schedule-resources>
<e-schedule-resource dataSource="@ViewBag.Projects" field="ProjectId" title=" Project" name="Projects" textField="text" idField="id" colorField="color"></e-schedule-resource>
</e-schedule-resource>
</e-schedule-resources>
</ejs-schedule>
Current date of the scheduler Property: current-date

<ej-schedule id="schedule" current-date="new DateTime(2018, 6, 5)">
</ej-schedule> 		Property: selectedDate

<ejs-schedule id="scheduler" selectedDate="new DateTime(2018, 8, 1)">
</ejs-schedule>
Show all day row Property: show-all-day-row

<ej-schedule id="schedule" show-all-day-row="false">
</ej-schedule> 		Not applicable
Show appointment navigator Property: show-appointment-navigator

<ej-schedule id="schedule" show-appointment-navigator="false">
</ej-schedule> 		Not applicable
Show delete confirmation dialog Property: show-delete-confirmation-dialog

<ej-schedule id="schedule" show-delete-confirmation-dialog="false">
</ej-schedule> 		Not applicable
Show header bar Property: show-header-bar

<ej-schedule id="schedule" show-header-bar="false">
</ej-schedule> 		Property: showHeaderBar

<ejs-schedule id="scheduler" showHeaderBar="false">
</ejs-schedule>
Show location field in event window Property: show-location-field

<ej-schedule id="schedule" show-location-field="false">
</ej-schedule> 		Not applicable
Show time zone fields in event window Property: show-time-zone-fields

<ej-schedule id="schedule" show-time-zone-fields="false">
</ej-schedule> 		Not applicable
Show previous and next month dates in month view Property: show-next-prev-month

<ej-schedule id="schedule" show-next-prev-month="false">
</ej-schedule> 		Not applicable
Show overflow button Property: show-overflow-button

<ej-schedule id="schedule" show-overflow-button="false">
</ej-schedule> 		Property: rowAutoHeight

<ejs-schedule id="schedule" rowAutoHeight="true">
</ejs-schedule>
Show quick popup Property: show-quick-window

<ej-schedule id="schedule" show-quick-window="false">
</ej-schedule> 		Property: showQuickInfo

<ejs-schedule id="scheduler" showQuickInfo="false">
</ejs-schedule>
Show current time indicator Property: show-current-time-indicator

<ej-schedule id="schedule" show-current-time-indicator="false">
</ej-schedule> 		Property: showTimeIndicator

<ejs-schedule id="scheduler" showTimeIndicator="false">
</ejs-schedule>
Show week number Not Applicable Property: showWeekNumber

<ejs-schedule id="scheduler" showWeekNumber="true">
</ejs-schedule>
Show weekend days Property: show-week-end

<ej-schedule id="schedule" show-week-end="false">
</ej-schedule> 		Property: showWeekend

<ejs-schedule id="scheduler" showWeekend="false">
</ejs-schedule>
Setting start hour of the scheduler Property: start-hour

<ej-schedule id="schedule" start-hour="9">
</ej-schedule> 		Property: startHour

<ejs-schedule id="scheduler" startHour="09:00">
</ejs-schedule>
Setting time mode on scheduler Property: time-mode

<ej-schedule id="schedule" time-mode="TimeMode.Hour24">
</ej-schedule> 		Not applicable
Setting timezone for scheduler Property: time-zone

<ej-schedule id="schedule" time-zone="UTC -05:00">
</ej-schedule> 		Property: timezone

<ejs-schedule id="scheduler" timezone="UTC">
</ejs-schedule>
Views in scheduler Property: views

@{List<string> view = new List<string>() { "Day", "Week", "WorkWeek", "Month" };}
<ej-schedule id="schedule" views="view">
</ej-schedule> 		Property: e-schedule-views

<ejs-schedule id="scheduler">
<e-schedule-views>
<e-schedule-view option="Day"></e-schedule-view>
<e-schedule-view option="Week"></e-schedule-view>
</e-schedule-views>
</ejs-schedule>
Width of the scheduler Property: width

<ej-schedule id="schedule" width="100%">
</ej-schedule> 		Property: width

<ejs-schedule id="scheduler" width="100%">
</ejs-schedule>
Working days Property: work-week

@{List<string> workWeek = new List<string>() { "Monday", "Friday", "Saturday" };}
<ej-schedule id="schedule" work-week="workWeek">
</ej-schedule> 		Property: workDays

@{var workDays = new int[] { 1, 3, 5 }};
<ejs-schedule id="scheduler" workDays="workDays">
</ejs-schedule>
Working hours Property: e-work-hours

<ej-schedule id="schedule">
<e-work-hours highlight="true" start="8" end="16"></e-work-hours>
</ej-schedule> 		Property: e-schedule-workhours

<ejs-schedule id="scheduler">
<e-schedule-workhours highlight="true" start="08:00" end="20:00"></e-schedule-workhours>
</ejs-schedule>

Resources

Behavior API in Essential® JS 1 API in Essential® JS 2
To define resource datasource Property: e-resources
@{
List<ScheduleFields> Appoint = new List<ScheduleFields>();
Appoint.Add(new ScheduleFields { Id = "1", Subject = "Meeting", StartTime = new DateTime(2015, 11, 10, 10, 00, 00), EndTime = new DateTime(2015, 11, 10, 11, 00, 00), Description = "", AllDay = false, Recurrence = false, RecurrenceRule = "", RoomId = "1", OwnerId = "5" });
List<String> Group = new List<String>();
Group.Add("Rooms");
Group.Add("Owners");
List<ResourceFields> Room = new List<ResourceFields>();
Room.Add(new ResourceFields { Id = "1", Text = "Room1", Color = "#f8a398", GroupId = "1" });
Room.Add(new ResourceFields { Id = "2", Text = "Room2", Color = "#56ca95", GroupId = "1" });
List<ResourceFields> Owner = new List<ResourceFields>();
Owner.Add(new ResourceFields { Text = "Nancy", Id = "1", GroupId = "1", Color = "#ffaa00", WorkHourStart = 10, WorkHourEnd = 18, CustomDays = new List<string> { "monday", "wednesday", "friday" } });
Owner.Add(new ResourceFields { Text = "Steven", Id = "3", GroupId = "2", Color = "#f8a398", WorkHourStart = 6, WorkHourEnd = 10, CustomDays = new List<string> { "tuesday", "thursday" } });
}

<ej-schedule id="schedule">
<e-group resources="Group"></e-group>
<e-resources>
<e-resource field="OwnerId" title="Owner" name="Owners">
<e-resource-settings datasource="Owner" text="Text" id="Id" group-id="GroupId" color="Color" start="WorkHourStart" end="WorkHourEnd" work-week="CustomDays"></e-resource-settings>
</e-resource>
</e-resources>
<e-appointment-settings datasource="Appoint"></e-appointment-settings>
</ej-schedule> 		Property: e-schedule-resources
@{
List<ResourceDataSourceModel> projects = new List<ResourceDataSourceModel>();
projects.Add(new ResourceDataSourceModel { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new ResourceDataSourceModel { text = "PROJECT 2", id = 2, color = "#56ca85" });
List<ResourceDataSourceModel> categories = new List<ResourceDataSourceModel>();
categories.Add(new ResourceDataSourceModel { text = "Development", id = 1, color = "#df5286" });
categories.Add(new ResourceDataSourceModel { text = "Testing", id = 2, color = "#7fa900" });
List<String> Resources = new List<String>();
Resources.Add("projects");
Resources.Add("categories");
}

<ejs-schedule id="scheduler">
<e-schedule-group resources="Resources"></e-schedule-group>
<e-schedule-resources>
<e-schedule-resource dataSource="projects" field="ProjectId" title=" Project" name="Projects" textField="text" idField="id" colorField="color"></e-schedule-resource>
<e-schedule-resource dataSource="categories" field="CategoryId" title="Category" name="Categories" textField="text" idField="id" colorField="color" allowMultiple="true"></e-schedule-resource>
</e-schedule-resources>
</ejs-schedule>
Allowing multiple selection of resources in event window Property: allow-multiple


<ej-schedule id="schedule">
<e-group resources="Group"></e-group>
<e-resources>
<e-resource field="OwnerId" title="Owner" name="Owners" allow-multiple=true>
<e-resource-settings datasource="Owner" text="Text" id="Id" group-id="GroupId" color="Color" start="WorkHourStart" end="WorkHourEnd" work-week="CustomDays"></e-resource-settings>
</e-resource>
</e-resources>
</ej-schedule> 		Property: allowMultiple

<ejs-schedule id="scheduler">
<e-schedule-group resources="Resources"></e-schedule-group>
<e-schedule-resources>
<e-schedule-resource dataSource="projects" field="ProjectId" title=" Project" name="Projects" textField="text" idField="id" colorField="color"></e-schedule-resource>
<e-schedule-resource dataSource="categories" field="CategoryId" title="Category" name="Categories" textField="text" idField="id" colorField="color" allowMultiple="true"></e-schedule-resource>
</e-schedule-resources>
</ejs-schedule>
Setting different work hours for each resource
<ej-schedule id="Schedule">
<e-resources>
<e-resource field="RoomId" title="Room" name="Rooms" allow-multiple="false">
<e-resource-settings datasource="Room" text="Text" id="Id" group-id="GroupId" color="Color">
</e-resource-settings>
</e-resource>
<e-resource field="OwnerId" title="Owner" name="Owners" allow-multiple="true">
<e-resource-settings datasource="Owner" text="Text" id="Id" group-id="GroupId" color="Color" start="WorkHourStart" end="WorkHourEnd" work-week="CustomDays">
</e-resource-settings>
</e-resource>
</e-resources>
<e-group resources="Group"></e-group>
<e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"' resource-fields='"RoomId,OwnerId"'>
</e-appointment-settings>
</ej-schedule> 		@{
List<DoctorRes> doctors = new List<DoctorRes>();
doctors.Add(new DoctorRes { text = "Will Smith", id = 1, color = "#ea7a57", workDays = new List<int> { 1, 2, 4, 5 }, startHour = "08:00", endHour = "15:00" });
doctors.Add(new DoctorRes { text = "Alice", id = 2, color = "rgb(53, 124, 210)", workDays = new List<int> { 1, 3, 5 }, startHour = "08:00", endHour = "17:00" });
doctors.Add(new DoctorRes { text = "Robson", id = 3, color = "#7fa900", startHour = "08:00", endHour = "16:00" });
List<String> Resources = new List<String>();
Resources.Add("Doctors");
}
<ejs-schedule id="schedule">
<e-schedule-group resources="Resources"></e-schedule-group>
<e-schedule-resources>
<e-resource dataSource="doctors"></e-resource>
</e-schedule-resources>
<e-schedule-views>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
</e-schedule-views>
</ejs-schedule>

Group

Behavior API in Essential® JS 1 API in Essential® JS 2
To group the resources in scheduler layout Property: resources

<ej-schedule id="schedule">
<e-group resources="@ViewBag.Grouping"></e-group>
</ej-schedule>
 Property: resources

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>
</ejs-schedule>
Allow group editing Property: allow-group-edit

<ej-schedule id="schedule">
<e-group resources="@ViewBag.Grouping" allow-group-edit="true"></e-group>
</ej-schedule>
 Property: allowGroupEdit

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources" allowGroupEdit="true"></e-schedule-group>
</ejs-schedule>
Grouping resources by date Not applicable Property: byDate

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources" byDate="true"></e-schedule-group>
</ejs-schedule>
Grouping resources based on its group ID Not applicable Property: byGroupId

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources" byGroupId="false"></e-schedule-group>
</ejs-schedule>
Enabling compact view on mobile mode Not applicable Property: enableCompactView

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources" enableCompactView="false"></e-schedule-group>
</ejs-schedule>
Header tooltip template Not applicable Property: headerTooltipTemplate

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources" headerTooltipTemplate="#resourceHeader"></e-schedule-group>
</ejs-schedule>

Header Rows

Behavior API in Essential® JS 1 API in Essential® JS 2
Adding custom rows in the header in timeline views Not applicable Property: e-schedule-header-rows

<ejs-schedule id="scheduler">
<e-schedule-header-rows>
<e-schedule-header-row option="Month" template="#month-template"></e-schedule-header-row>
<e-schedule-header-row option="Week" template="#week-template"></e-schedule-header-row>
<e-schedule-header-row option="Date"></e-schedule-header-row>
</e-schedule-header-rows>
</ejs-schedule>

TimeScale

Behavior API in Essential® JS 1 API in Essential® JS 2
Enabling time scale Property: enable

<ej-schedule id="schedule">
<e-time-scale enable="false"></e-time-scale>
</ej-schedule>
 Property: enable

<ejs-schedule id="scheduler">
<e-schedule-timescale enable="false"></e-schedule-timescale>
</ejs-schedule>
Setting major interval on time scale Property: major-slot

<ej-schedule id="schedule">
<e-time-scale enable="true" major-slot="60"></e-time-scale>
</ej-schedule>
 Property: interval

<ejs-schedule id="scheduler" interval="60">
<e-schedule-timescale ></e-schedule-timescale>
</ejs-schedule>
Setting slot count on time scale Property: minor-slot-count

<ej-schedule id="schedule"'>
<e-time-scale enable="true" major-slot="60" minor-slot-count="6"></e-time-scale>
</ej-schedule>
 Property: slotCount

<ejs-schedule id="scheduler">
<e-schedule-timescale interval="60" slotCount="6"></e-schedule-timescale>
</ejs-schedule>
Defining major slot template Property: major-slot-template-id

<ej-schedule id="schedule">
<e-time-scale enable="true" major-slot="60" minor-slot-count="6" major-slot-template-id="#majorSlotTemplate"></e-time-scale>
</ej-schedule>
 Property: majorSlotTemplate

<ejs-schedule id="scheduler">
<e-schedule-timescale interval="60" slotCount="6" majorSlotTemplate ="#majorSlotTemplate"></e-schedule-timescale>
</ejs-schedule>
Defining minor slot template Property: minor-slot-template-id

<ej-schedule id="schedule" current-view='Agenda'>
<e-time-scale enable="true" major-slot="60" minor-slot-count="6" minoor-slot-template-id="#minorSlotTemplate"></e-time-scale>
</ej-schedule>
 Property: minorSlotTemplate

<ejs-schedule id="scheduler">
<e-schedule-timescale interval="60" slotCount="6" minorSlotTemplate ="#minorSlotTemplate"></e-schedule-timescale>
</ejs-schedule>

Quick info templates

Behavior API in Essential® JS 1 API in Essential® JS 2
Template for quick popup Not applicable Property: e-schedule-quick-info-templates

<ejs-schedule id="scheduler">
<e-schedule-quick-info-templates header="#headertemplate" content="#contentTemplate" footer="#footerTemplate"></e-schedule-quick-info-templates>
</ejs-schedule>

Event settings

Behavior API in Essential® JS 1 API in Essential® JS 2
Datasource for events Property: datasource

<ej-schedule id="schedule">
<e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"'></e-appointment-settings>
</ej-schedule>
 Property: dataSource

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments"></e-schedule-eventsettings>
</ejs-schedule>
Appointment fields <ej-schedule id="schedule">
<e-appointment-settings datasource="Appoint" id="Id" subject='"Subject"' start-time='"StartTime"' end-time='"EndTime"' description='"Description"' all-day='"AllDay"' recurrence='"Recurrence"' recurrence-rule='"RecurrenceRule"'></e-appointment-settings>
</ej-schedule>
 Property: e-eventsettings-fields

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments">
<e-eventsettings-fields>
<e-field-id name="Id"></e-field-id>
<e-field-subject name="Subject" default="New title" title="Event Name" validation="ValidationRules"></e-field-subject>
<e-field-location name="Location"></e-field-location>
<e-field-isallday name="EndTime"></e-field-isallday>
<e-field-description name="Description"></e-field-description>
<e-field-starttime name="StartTime"></e-field-starttime>
<e-field-endtime name="EndTime"></e-field-endtime>
<e-field-recurrenceid name="Recurrence"></e-field-recurrenceid>
<e-field-recurrencerule name="Recurrence"></e-field-recurrencerule>
<e-field-recurrenceexception name="EndTime"></e-field-recurrenceexception>
<e-field-starttimezone name="EndTime"></e-field-starttimezone>
<e-field-endtimezone name="EndTime"></e-field-endtimezone>
</e-eventsettings-fields>
</e-schedule-eventsettings>
</ejs-schedule>
Enabling tooltip for appointments Property: enable

<ej-schedule id="schedule">
<e-appointment-settings datasource="Appoint">
<e-schedule-tooltip-settings enable="true"></e-schedule-tooltip-settings>
</e-appointment-settings>
</ej-schedule>
Note: Here tooltip setting for events is maintained separately 		Property: enableTooltip

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments" enableTooltip="true"></e-schedule-eventsettings>
</ejs-schedule>
Tooltip template for appointments Property: template-id

<ej-schedule id="schedule">
<e-appointment-settings datasource="Appoint">
<e-schedule-tooltip-settings enable="true" template-id="#tooltipTemplate"></e-schedule-tooltip-settings>
</e-appointment-settings>
</ej-schedule>
Note: Here tooltip setting for events is maintained separately 		Property: tooltipTemplate

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments" enableTooltip="true" tooltipTemplate="#toolTip"></e-schedule-eventsettings>
</ejs-schedule>
Template for appointments Property: appointment-template-id

<ej-schedule id="schedule" appointment-template-id="#apptemplate">
<e-appointment-settings datasource="Appoint"></e-appointment-settings>
</ej-schedule>
Note: Here appointment template is used as simple API 		Property: template

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments" template="#eventTemplate"></e-schedule-eventsettings>
</ejs-schedule>
Query Property: query

var query = ej.Query().from("Events").take(10);
<ej-schedule id="schedule">
<e-appointment-settings datasource="Appoint" query="query"></e-appointment-settings>
</ej-schedule> 		Property: query

<ejs-schedule id="scheduler">
<e-schedule-eventsettings dataSource="@ViewBag.appointments" query="@ViewBag.query"></e-schedule-eventsettings>
</ejs-schedule>
Define which resource level’s color to be applied to events Not applicable Property: resourceColorField

<ejs-schedule id="scheduler">
<e-schedule-group resources="@ViewBag.Resources"></e-schedule-group>
<e-schedule-resources>
<e-schedule-resource dataSource="@ViewBag.Projects" field="ProjectId" title=" Project" name="Projects" textField="text" idField="id" colorField="color"></e-schedule-resource>
<e-schedule-resource dataSource="@ViewBag.Categories" field="CategoryId" title="Category" name="Categories" textField="text" idField="id" colorField="color" allowMultiple="true"></e-schedule-resource>
</e-schedule-resources>
<e-schedule-eventsettings dataSource="@ViewBag.appointments" resourceColorField="Projects"></e-schedule-eventsettings>
</ejs-schedule>

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
To add appointments manually Method: saveAppointment()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var obj = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2018, 4, 5, 10, 00),
EndTime: new Date(2018, 4, 5, 12, 00)
};
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.saveAppointment(obj);
</script> 		Method: addEvent()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.addEvent({
Id: 1,
Subject: 'New Event',
StartTime: new Date(2018, 7, 31, 10, 30),
EndTime: new Date(2018, 7, 31, 12, 0)});
</script>
To add resources dynamically Method: addResource()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var obj= { text: "Paul", id: 1, groupId: 3, color: "#cc99ff" };
var index = 0;
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.addResource(obj, "Owners", index);
</script> 		Method: addResource()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var obj = { text: "Paul", id: 3, groupId: 1, color: "#cc99ff" };
var index = 0;
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.addResource(obj, "Owners", index);
</script>
databind Not applicable Method: dataBind()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.currentView = 'Month';
scheduleobj.dataBind();
</script>
Delete appointment manually Method: deleteAppointment()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var obj= {
Id: 1,
Subject: "Testing",
StartTime: new Date(2018, 4, 5, 10, 00),
EndTime: new Date(2018, 4, 5, 12, 00)
};
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.deleteAppointment(obj);
</script> 		Method: deleteEvent()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var obj = {
Id: 1,
Subject: "Testing",
StartTime: new Date(2018, 4, 5, 10, 00),
EndTime: new Date(2018, 4, 5, 12, 00)
};
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.deleteEvent(obj);
</script>
destroy scheduler Method: destroy()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.destroy();
</script> 		Method: destroy()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.destroy();
</script>
Get cell details Method: getSlotByElement()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var $td = $(".e-draggableworkarea table tr td").first();
var cellDetails = scheduleobj.getSlotByElement($td);
</script> 		Method: getCellDetails()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var $td = $(".e-content-table tbody tr td");
var cellDetail = scheduleobj.getCellDetails($td);
</script>
Get current view appointments Method: getCurrentViewAppointments()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var appointments = scheduleobj.getCurrentViewAppointments();
</script> 		Method: getCurrentViewEvents()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var appointments = scheduleobj.getCurrentViewEvents(); </code>
</script>
Get entire appointment collection Method: getAppointments()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var AppDetails = scheduleobj.getAppointments();
</script> 		Method: getEvents()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getEvents();
</script>
Get current view dates Not applicable Method: getCurrentViewDates()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getCurrentViewDates();
</script>
Get event details Not applicable Method: getEventDetails()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var appElement = document.querySelector(".e-appointment");
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var AppDetails = scheduleobj.getEventDetails(appElement);
</script>
Get occurrences using event ID Not applicable Method: getOccurrenceByID()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var recCollection = scheduleobj.getOccurrenceByID(1);
</script>
Get occurrences in the provided date range Not applicable Method: getOccurrenceByRange()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var startDate = new Date(2018, 1, 12);
var endDate = new Date(2018, 1, 17);
var recCollection = scheduleobj.getOccurrenceByRange(startDate, endDate);
</script>
Get resource details using index Not applicable Method: getResourceByIndex()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var resCollection = scheduleobj.getResourceByIndex(2);
</script>
Show spinner Not applicable Method: showSpinner()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.showSpinner();
</script>
Hide spinner Not applicable Method: hideSpinner()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.hideSpinner();
</script>
Check whether the time slot is available Not applicable Method: isSlotAvailble()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var start = new Date(2018, 1, 14, 09, 30);
var end = new Date(2018, 1, 14, 10, 30);
var resCollection = scheduleobj.isSlotAvailble(start, end);
</script>
Open the event window manually Not applicable Method: openEditor()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
var $td = $(".e-content-table tbody tr td");
var cellDetail = scheduleobj.getCellDetails($td);
scheduleobj.openEditor(cellDetail);
</script>
Refresh the scheduler Method: refresh()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.refresh();
</script> 		Method: refresh()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.refresh();
</script>
Refresh the events Method: refreshAppointments()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.refreshAppointments();
</script> 		Method: refreshEvents()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.refreshEvents();
</script>
Refresh the scroller Method: refreshScroller()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.refreshScroller();
</script> 		Not Applicable
To remove resources dynamically Method: removeResource()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var resourceId = 1;
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.removeResource(resourceId, "Owners");
</script> 		Method: removeResource()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var obj = { text: "Paul", id: 3, groupId: 1, color: "#cc99ff" };
var index = 0;
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.removeResource(index, "Owners", );
</script>
Export schedule as PDF Method: exportSchedule()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.exportSchedule("ActionName","null", null);
</script> 		Not Applicable
Export scheduler events to ICS Method: exportSchedule()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.exportSchedule("ActionName","ExportToICS", null);
</script> 		Method: exportToICalendar()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToICalendar();
</script>
Import scheduler events from ICS Not Applicable Method: importICalendar()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.importICalendar();
</script>
Export scheduler appointments in Excel file Method: exportToExcel()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.exportToExcel("ActionName", null, true);
</script> 		Method: exportToExcel()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToExcel();
</script>
Print the scheduler Method: print()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.print();
</script> 		Not Applicable
Filter appointments Method: filterAppointments()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var filter = [{ field: "Subject", operator: "contains", value: "with", predicate: "or" }];
var filteredApp = scheduleobj.filterAppointments(filter);
</script> 		Not Applicable
Search appointments Method: searchAppointments()
<ej-schedule id="schedule">
</ej-schedule>

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var searchApp = scheduleobj.searchAppointments("with");
</script> 		Not Applicable
To edit appointments manually Not applicable Method: saveEvent()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.saveEvent({
Id: 1,
Subject: 'Event edited',
StartTime: new Date(2018, 7, 31, 10, 30),
EndTime: new Date(2018, 7, 31, 12, 0)});
</script>
Setting work hours Not applicable Method: setWorkHours()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:
<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.setWorkHours([new Date(2017, 9, 5)], '04:00', '08:00');
</script>
Scrolling to specific time Not applicable Method: scrollTo()
<ejs-schedule id="scheduler"></ejs-schedule>

Script:<script>
var scheduleobj= document.getElementById('schedule').ej2_instances[0];
scheduleobj.scrollTo('12:00');
</script>

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Fires on the beginning of each scheduler action Event: action-begin

<ej-schedule id="schedule" action-begin="onActionBegin">
</ej-schedule>

Script:
<script>
function onActionBegin(args) {
}
</script> 		Event: actionBegin

<ejs-schedule id="schedule" actionBegin="onActionBegin">
</ejs-schedule >

Script:
<script>
function onActionBegin(args) {
}
</script>
Fires on the completion of each scheduler action Event: action-complete

<ej-schedule id="schedule" action-complete="onActionComplete">
</ej-schedule>

Script:
<script>
function onActionComplete(args) {
}
</script> 		Event: actionComplete

<ejs-schedule id="schedule" actionComplete="onActionComplete">
</ejs-schedule >

Script:
<script>
function onActionComplete(args) {
}
</script>
Fires when the scheduler action gets failed Not applicable Event: actionFailure

<ejs-schedule id="schedule" actionFailure="onActionFailure">
</ejs-schedule >

Script:
<script>
function onActionFailure(args) {
}
</script>
Fires on appointment hover Event: appointment-hover

<ej-schedule id="schedule" appointment-hover="onAppointmentHover">
</ej-schedule>

Script:
<script>
function onAppointmentHover(args) {
}
</script> 		Not applicable
Fires before an appointment gets created Event: before-appointment-create

<ej-schedule id="schedule" before-appointment-create="onBeforeAppointmentCreate">
</ej-schedule>

Script:
<script>
function onBeforeAppointmentCreate(args) {
}
</script> 		Event: actionBegin

<ejs-schedule id="schedule" actionBegin="onActionBegin">
</ejs-schedule >

Script:
<script>
function onActionBegin(args) {
if(args.requestType == 'eventCreate')
}
</script>
Fires before an appointment gets edited Event: before-appointment-change

<ej-schedule id="schedule" before-appointment-create="onBeforeAppointmentChange">
</ej-schedule>

Script:
<script>
function onBeforeAppointmentChange(args) {
}
</script> 		Event: actionBegin

<ejs-schedule id="schedule" actionBegin="onActionBegin">
</ejs-schedule >

Script:
<script>
function onActionBegin(args) {
if(args.requestType == 'eventChange')
}
</script>
Fires before an appointment gets deleted Event: before-appointment-remove

<ej-schedule id="schedule" before-appointment-remove="onBeforeAppointmentRemove">
</ej-schedule>

Script:
<script>
function onBeforeAppointmentRemove(args) {
}
</script> 		Event: actionBegin

<ejs-schedule id="schedule" actionBegin="onActionBegin">
</ejs-schedule >

Script:
<script>
function onActionBegin(args) {
if(args.requestType == 'eventRemove')
}
</script>
Fires before the context menu opens on scheduler Event: before-context-menu-open

<ej-schedule id="schedule" before-context-menu-open="onBeforeContextMenuOpen">
</ej-schedule>

Script:
<script>
function onBeforeContextMenuOpen(args) {
}
</script> 		Not applicable
Fires on cell click Event: cell-click

<ej-schedule id="schedule" cell-click="onCellClick">
</ej-schedule>

Script:
<script>
function onCellClick(args) {
}
</script> 		Event: cellClick

<ejs-schedule id="schedule" cellClick="onCellClick">
</ejs-schedule >

Script:
<script>
function onCellClick(args) {
}
</script>
Fires on cell double click Event: cell-double-click

<ej-schedule id="schedule" cell-double-click="onCellDoubleClick">
</ej-schedule>

Script:
<script>
function onCellDoubleClick(args) {
}
</script> 		Event: cellDoubleClick

<ejs-schedule id="schedule" cellDoubleClick="onCellDoubleClick">
</ejs-schedule >

Script:
<script>
function onCellDoubleClick(args) {
}
</script>
Fires on cell hover Event: cell-hover

<ej-schedule id="schedule" cell-hover="onCellHover">
</ej-schedule>

Script:
<script>
function onCellHover(args) {
}
</script> 		Not applicable
Fires once the scheduler is created Event: create

<ej-schedule id="schedule" create="onCreate">
</ej-schedule>

Script:
<script>
function onCreate(args) {
}
</script> 		Event: created

<ejs-schedule id="schedule" created="onCreated">
</ejs-schedule >

Script:
<script>
function onCreated(args) {
}
</script>
Fires on data binding action Not applicable Event: dataBinding

<ejs-schedule id="schedule" dataBinding="onDataBinding">
</ejs-schedule >

Script:
<script>
function onDataBinding(args) {
}
</script>
Fires after the data is bound to the control Not applicable Event: dataBound

<ejs-schedule id="schedule" dataBinding="onDataBound">
</ejs-schedule >

Script:
<script>
function onDataBound(args) {
}
</script>
Fires once the scheduler is destroyed Event: destroy

<ej-schedule id="schedule" destroy="onDestroy">
</ej-schedule>

Script:
<script>
function onDestroy(args) {
}
</script> 		Event: destroyed

<ejs-schedule id="schedule" destroyed="onDestroyed">
</ejs-schedule >

Script:
<script>
function onDestroyed(args) {
}
</script>
Fires on event click Event: appointment-click

<ej-schedule id="schedule" appointment-click="onAppointmentClick">
</ej-schedule>

Script:
<script>
function onAppointmentClick(args) {
}
</script> 		Event: eventClick

<ejs-schedule id="schedule" eventClick="onAppointmentClick">
</ejs-schedule >

Script:
<script>
function onAppointmentClick(args) {
}
</script>
Fires on event double click Event: appointment-double-click

<ej-schedule id="schedule" appointment-double-click="onAppointmentDoubleClick">
</ej-schedule>

Script:
<script>
function onAppointmentDoubleClick(args) {
}
</script> 		Not applicable
Fires for keyboard actions Event: key-down

<ej-schedule id="schedule" key-down="onKeyDown">
</ej-schedule>

Script:
<script>
function onKeyDown(args) {
}
</script> 		Not applicable
Fires on context menu item click Event: menu-item-click

<ej-schedule id="schedule" menu-item-click="onMenuItemClick">
</ej-schedule>

Script:
<script>
function onMenuItemClick(args) {
}
</script> 		Not applicable
Fires on navigation Event: navigation

<ej-schedule id="schedule" navigation="onNavigation">
</ej-schedule>

Script:
<script>
function onNavigation(args) {
}
</script> 		Event: navigating

<ejs-schedule id="schedule" navigating="onNavigating">
</ejs-schedule >

Script:
<script>
function onNavigating(args) {
}
</script>
Fires on popup open Event: appointment-window-open

<ej-schedule id="schedule" appointment-window-open="onAppointmentWindowOpen">
</ej-schedule>

Script:
<script>
function onAppointmentWindowOpen(args) {
}
</script> 		Event: popupOpen

<ejs-schedule id="schedule" popupOpen="onPopupOpen">
</ejs-schedule >

Script:
<script>
function onPopupOpen(args) {
}
</script>
Fires on dragging event Event: drag

<ej-schedule id="schedule" drag="onDrag">
</ej-schedule>

Script:
<script>
function onDrag(args) {
}
</script> 		Event: drag

<ejs-schedule id="schedule" drag="onDrag">
</ejs-schedule >

Script:
<script>
function onDrag(args) {
}
</script>
Fires on drag start Event: drag-start

<ej-schedule id="schedule" drag-start="onDragStart">
</ej-schedule>

Script:
<script>
function onDragStart(args) {
}
</script> 		Event: dragStart

<ejs-schedule id="schedule" dragStart="onDragStart">
</ejs-schedule >

Script:
<script>
function onDragStart(args) {
}
</script>
Fires on drag stop Event: drag-stop

<ej-schedule id="schedule" drag-stop="onDragStop">
</ej-schedule>

Script:
<script>
function onDragStop(args) {
}
</script> 		Event: dragStop

<ejs-schedule id="schedule" dragStop="onDragStop">
</ejs-schedule >

Script:
<script>
function onDragStop(args) {
}
</script>
Fires on overflow button click Event: overflow-button-click

<ej-schedule id="schedule" overflow-button-click="onOverflowButtonClick">
</ej-schedule>

Script:
<script>
function onOverflowButtonClick(args) {
}
</script> 		Event: popupOpen

<ejs-schedule id="schedule" popupOpen="onPopupOpen">
</ejs-schedule >

Script:
<script>
function onPopupOpen(args) {
if(args.requestType == 'eventContainer')
}
</script>
Fires on overflow button hover Event: overflow-button-hover

<ej-schedule id="schedule" overflow-button-hover="onOverflowButtonHover">
</ej-schedule>

Script:
<script>
function onOverflowButtonHover(args) {
}
</script> 		Not applicable
Fires when the reminder action takes place Event: reminder

<ej-schedule id="schedule" reminder="onReminder">
</ej-schedule>

Script:
<script>
function onReminder(args) {
}
</script> 		Not applicable
Fires on resizing event Event: resize

<ej-schedule id="schedule" resize="onResize">
</ej-schedule>

Script:
<script>
function onResize(args) {
}
</script> 		Event: resize

<ejs-schedule id="schedule" resize="onResize">
</ejs-schedule >

Script:
<script>
function onResize(args) {
}
</script>
Fires on resize start Event: resize-start

<ej-schedule id="schedule" resize-start="onResizeStart">
</ej-schedule>

Script:
<script>
function onResizeStart(args) {
}
</script> 		Event: resizeStart

<ejs-schedule id="schedule" resizeStart="onResizeStart">
</ejs-schedule >

Script:
<script>
function onResizeStart(args) {
}
</script>
Fires on resize stop Event: resize-stop

<ej-schedule id="schedule" resize-stop="onResizeStop">
</ej-schedule>

Script:
<script>
function onResizeStop(args) {
}
</script> 		Event: resizeStop

<ejs-schedule id="schedule" resizeStop="onResizeStop">
</ejs-schedule >

Script:
<script>
function onResizeStop(args) {
}
</script>
Fires on rendering of every scheduler elements Event: query-cell-info

<ej-schedule id="schedule" query-cell-info="onQueryCellInfo">
</ej-schedule>

Script:
<script>
function onQueryCellInfo(args) {
}
</script> 		Event: renderCell

<ejs-schedule id="schedule" renderCell="onRenderCell">
</ejs-schedule >

Script:
<script>
function onRenderCell(args) {
}
</script>

Fires before the event rendering on UI Not applicable Event: eventRendered

<ejs-schedule id="schedule" eventRendered="onEventRendered">
</ejs-schedule >

Script:
<script>
function onEventRendered(args) {
}
</script>

You can refer to our ASP.NET Core Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Scheduler example to knows how to present and manipulate data.