Search results

Migration from Essential JS 1

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>
Not applicable
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>
Not applicable
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();
</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","ExportToICS", null);
</script>
Not Applicable
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>
Not Applicable
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>
Not applicable
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>
Not applicable
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>
Not applicable
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>
Not applicable
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>