Contents
- Scheduler
- Properties
- Methods
- Events
Having trouble getting help?
Contact Support
Contact Support
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.