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: DaysInAgenda

@(Html.EJ().Schedule("schedule").CurrentView(CurrentView.Agenda)
.AgendaViewSettings(agendaViewSettings => agendaViewSettings.DaysInAgenda(5))
Property: AgendaDaysCount

@Html.EJS().Schedule("schedule").CurrentView(View.Agenda).AgendaDaysCount(5).Render()
Preventing deletion of appointment Property: AllowDelete

@(Html.EJ().Schedule("schedule").AllowDelete(true))
Not applicable
Allows dragging and dropping of appointments Property: AllowDragAndDrop

@(Html.EJ().Schedule("schedule").AllowDragAndDrop(false))
Property: AllowDragAndDrop

@Html.EJS().Schedule("schedule").AllowDragAndDrop(false).Render()
Enable inline editing of appointments Property: AllowInline

@(Html.EJ().Schedule("schedule").AllowInline(true))
Not applicable
Allow keyboard interactions Property: AllowKeyboardNavigation

@(Html.EJ().Schedule("schedule").AllowKeyboardNavigation(false))
Property: AllowKeyboardInteraction

@Html.EJS().Schedule("schedule").AllowKeyboardInteraction(false).Render()
Enable resizing of appointments Property: EnableAppointmentResize

@(Html.EJ().Schedule("schedule").EnableAppointmentResize(false))
Property: AllowResizing

@Html.EJS().Schedule("schedule").AllowResizing(false).Render()
Blocking time intervals Property: BlockoutSettings

@(Html.EJ().Schedule("schedule").BlockoutSettings(fields => fields.Enable(true)
.Datasource(blockData)
.Id("Id")
.Subject("Subject")
.StartTime
("StartTime")
.EndTime("EndTime")
.IsBlockAppointment("IsBlockAppointment")))
Not applicable
Categorizing the appointments Property: CategorizeSettings

@(Html.EJ().Schedule("schedule")
.CategorizeSettings(fields => fields.Datasource(CategorizeValue).Enable(true).AllowMultiple(true).Id("Id").Text("Text").Color("Color").FontColor("FontColor"))
Not applicable
Setting cell height Property: CellHeight

@(Html.EJ().Schedule("schedule").CellHeight("40px"))
Not applicable
Cell template Property: WorkCellsTemplateId

@(Html.EJ().Schedule("schedule").WorkCellsTemplateId(#workCellTemplate).AllDayCellsTemplateId("#allDayCellTemplate"))
Property: CellTemplate

@Html.EJS().Schedule("schedule").CellTemplate("#cellTemplate").Render()
Setting cell width Property: CellWidth

@(Html.EJ().Schedule("schedule").CellWidth("35px"))
Not applicable
CSS class Property: CssClass

@(Html.EJ().Schedule("schedule").CssClass("customstyle"))
Property: CssClass

@Html.EJS().Schedule("schedule").CssClass("customstyle").Render()
Enabling Context-menu option Property: e-context-menu-settings

@(Html.EJ().Schedule("schedule")
.ContextMenuSettings(contextMenu => contextMenu.Enable(true).MenuItems(items => items.Appointment(AppMenu).Cells(CellMenu)))
Not applicable
Current view Property: CurrentView

@(Html.EJ().Schedule("schedule").CurrentView(CurrentView.Day))
Property: CurrentView

@Html.EJS().Schedule("schedule").CurrentView(View.Day).Render()
Date format Property: DateFormat

@(Html.EJ().Schedule("schedule").DateFormat("yyyy/MM/dd"))
Property: DateFormat

@Html.EJS().Schedule("schedule").DateFormat("yyyy/MM/dd"))
Date header template Property: date-header-template-id

@Html.EJS().Schedule("schedule").DateHeaderTemplateId("#dateTemplate")
Property: DateHeaderTemplate

@Html.EJS().Schedule("schedule").DateHeaderTemplate("#template")
Editor template Not Applicable Property: EditorTemplate

@Html.EJS().Schedule("schedule").EditorTemplate("#EditorTemplate").Render()
Enable load on demand Property: EnableLoadOnDemand

@(Html.EJ().Schedule("schedule").EnableLoadOnDemand(true))
Not applicable
Enable persistence Property: EnablePersistence

@(Html.EJ().Schedule("schedule").EnablePersistence(false))
Property: EnablePersistence

@Html.EJS().Schedule("schedule").EnablePersistence(true).Render()
Enable RTL Property: EnableRTL

@(Html.EJ().Schedule("schedule").EnableRTL(true))
Property: EnableRTL

@Html.EJS().Schedule("schedule").EnableRTL(true).Render()
Setting end hour of the scheduler Property: EndHour

@(Html.EJ().Schedule("schedule").EndHour(18))
Property: EndHour

@Html.EJS().Schedule("schedule").EndHour("20:00").Render()
Setting first day of the week Property: FirstDayOfWeek

@(Html.EJ().Schedule("schedule").FirstDayOfWeek(DayOfWeek.Monday))
Property: FirstDayOfWeek

@Html.EJS().Schedule("schedule").FirstDayOfWeek(1).Render()
Height of the scheduler Property: Height

@(Html.EJ().Schedule("schedule").Height("550px"))
Property: Height

@Html.EJS().Schedule("schedule").Height("550px").Render()
Locale Property: Locale

@(Html.EJ().Schedule("schedule").Locale("fr-FR"))
Property: Locale

@Html.EJS().Schedule("schedule").Locale("fr-FR").Render()
Priority settings for appointments Property: PrioritySettings

@(Html.EJ().Schedule("schedule")
.PrioritySettings(fields => fields.Datasource(PriorityValue).Enable(true).Text("Text").Value("Value"))
Not applicable
Read only Property: ReadOnly

@(Html.EJ().Schedule("schedule").ReadOnly(true))
Property: Readonly

@Html.EJS().Schedule("schedule").Readonly(true).Render()
Reminder settings Property: e-reminder-settings

@(Html.EJ().Schedule("schedule")
.ReminderSettings(rem => rem.Enable(true).AlertBefore(10))
Not applicable
Resource header template Property: ResourceHeaderTemplateId

@(Html.EJ().Schedule("schedule").Group(gr => {gr.Resources(Group); }).ResourceHeaderTemplateId("#resTemplate")
.Resources(res => { res.Field("RoomId").Title("Room").Name("Rooms").AllowMultiple(true).ResourceSettings(fields => fields.Datasource(Room).Text("Text").Id("Id").Color("Color").GroupId("GroupId")).Add();}))
Property: ResourceHeaderTemplate

@Html.EJS().Schedule("schedule").ResourceHeaderTemplate("#resourceTemplate").Group(group => group.Resources(ViewBag.Resources)).Resources(res => { res.DataSource(ViewBag.Doctors).Field("DoctorId").Title("Doctor Name").Name("Doctors").TextField("text").IdField("id").ColorField("color")
Current date of the scheduler Property: CurrentDate

@(Html.EJ().Schedule("schedule").CurrentDate(new DateTime(2018, 6, 12)))
Property: SelectedDate

@Html.EJS().Schedule("schedule").SelectedDate(new DateTime(2018,1,31)).Render()
Show all day row Property: ShowAllDayRow

@(Html.EJ().Schedule("schedule").ShowAllDayRow(false))
Not applicable
Show appointment navigator Property: ShowAppointmentNavigator

@(Html.EJ().Schedule("schedule").ShowAppointmentNavigator(false))
Not applicable
Show delete confirmation dialog Property: ShowDeleteConfirmationDialog

@(Html.EJ().Schedule("schedule").ShowDeleteConfirmationDialog(false))
Not applicable
Show header bar Property: ShowHeaderBar

@(Html.EJ().Schedule("schedule").ShowHeaderBar(false))
Property: ShowHeaderBar

@Html.EJS().Schedule("schedule").ShowHeaderBar(false).Render()
Show location field in event window Property: ShowLocationField

@(Html.EJ().Schedule("schedule").ShowLocationField(false))
Not applicable
Show time zone fields in event window Property: ShowTimeZoneFields

@(Html.EJ().Schedule("schedule").ShowTimeZoneFields(false))
Not applicable
Show previous and next month dates in month view Property: ShowNextPrevMonth

@(Html.EJ().Schedule("schedule").ShowNextPrevMonth(false))
Not applicable
Show overflow button Property: ShowOverflowButton

@(Html.EJ().Schedule("schedule").ShowOverflowButton(false))
Not applicable
Show quick popup Property: ShowQuickWindow

@(Html.EJ().Schedule("schedule").ShowQuickWindow(false))
Property: ShowQuickInfo

@Html.EJS().Schedule("schedule").ShowQuickInfo(false).Render()
Show current time indicator Property: ShowCurrentTimeIndicator

@(Html.EJ().Schedule("schedule").ShowCurrentTimeIndicator(false))
Property: ShowTimeIndicator

@Html.EJS().Schedule("schedule").ShowTimeIndicator(false).Render()
Show week number Not Applicable Property: ShowWeekNumber

@Html.EJS().Schedule("schedule").ShowWeekNumber(true).Render()
Show weekend days Property: ShowWeekend

@(Html.EJ().Schedule("schedule").ShowWeekend(false))
Property: ShowWeekend

@Html.EJS().Schedule("schedule").ShowWeekend(false).Render()
Setting start hour of the scheduler Property: StartHour

@(Html.EJ().Schedule("schedule").StartHour(7))
Property: StartHour

@Html.EJS().Schedule("schedule").StartHour("09:00").Render()
Setting time mode on scheduler Property: TimeMode

@(Html.EJ().Schedule("schedule").TimeMode(TimeMode.Hour24))
Not applicable
Setting timezone for scheduler Property: TimeZone

@(Html.EJ().Schedule("schedule").TimeZone("UTC +05:30"))
Property: Timezone

@Html.EJS().Schedule("schedule").Timezone("UTC").Render()
Views in scheduler Property: Views

@{List<string> views = new List<string>() { "Day", "Week", "WorkWeek", "Month" };}
@(Html.EJ().Schedule("schedule").Views(views)
Property: Views

@Html.EJS().Schedule("schedule").Views(ViewBag.view).Render()
Width of the scheduler Property: Width

@(Html.EJ().Schedule("schedule").Width("100%"))
Property: Width

@Html.EJS().Schedule("schedule").Width("100%").Render()
Working days Property: WorkWeek

@{List<string> workWeek = new List<string>() { "Monday", "Friday", "Saturday" };}
@(Html.EJ().Schedule("schedule").WorkWeek(workWeek)
Property: WorkDays

@{var workDays = new int[] { 1, 3, 5 };}
@Html.EJS().Schedule("schedule").WorkDays(ViewBag.workDays).Render()
Working hours Property: WorkHours

@(Html.EJ().Schedule("schedule").WorkHours(hrs => hrs.Highlight(true).Start(8).End(16))
Property: WorkHours

@Html.EJS().Schedule("schedule").WorkHours(new ScheduleWorkHours { Highlight = true, Start = "08:00", End = "20:00" }).Render()

Resources

Behavior API in Essential JS 1 API in Essential JS 2
To define resource datasource Property: 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", Start = 10, End = 18, CustomDays = new List<string> { "monday", "wednesday", "friday" } });
Owner.Add(new ResourceFields { Text = "Steven", Id = "3", GroupId = "2", Color = "#f8a398", Start = 6, End = 10, CustomDays = new List<string> { "tuesday", "thursday" } });
}

@(Html.EJ().Schedule("schedule").Group(group => group.Resources(Group)).Resources(res => { res.ResourceSettings(flds => flds.Datasource(Owner)).Field("OwnerId").Title("Owner").Name("Owners").Text("text").Id("id").Color("color").Add(); }).AppointmentSettings(fields => fields.Datasource(Appoint)))
Property: Resources
@{
List<Projects> projects = new List<Projects>();
projects.Add(new Projects { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new Projects { text = "PROJECT 2", id = 2, color = "#56ca85" });
List<Categories> categories = new List<Categories>();
categories.Add(new Categories { text = "Development", id = 1, color = "#1aaa55" });
categories.Add(new Categories { text = "Testing", id = 2, color = "#7fa900" });
List<String> Resources = new List<String>();
Resources.Add("Projects");
Resources.Add("Categories");
}

@Html.EJS().Schedule("schedule").Group(group => group.Resources(Resources)).Resources(res => { res.DataSource(projects).Field("ProjectId").Title("Project").Name("Projects").TextField("text").IdField("id").ColorField("color").Add(); res.DataSource(categories).Field("CategoryId").Title("Category").Name("Categories").TextField("text").IdField("id").ColorField("color").Add(); }).Render()
Allowing multiple selection of resources in event window Property: AllowMultiple
@(Html.EJ().Schedule("schedule").Group(gr => { gr.Resources(Group); }).Resources(res => {res.Field("RoomId").Title("Room").Name("Rooms").AllowMultiple(true).ResourceSettings(fields => fields.Datasource(Room).Text("Text").Id("Id").Color("Color").GroupId("GroupId")).Add(); res.Field("OwnerId").Title("Owner").Name("Owners").AllowMultiple(true).ResourceSettings(fields => fields.Datasource(Owner).Text("Text").Id("Id").Color("Color").GroupId("GroupId").Start("Start").End("End").WorkWeek("WorkWeek")).Add();}).AppointmentSettings(fields => fields.Datasource(Appoint)))
Property: AllowMultiple

@Html.EJS().Schedule("schedule").Group(group => group.Resources(Resources)).Resources(res => { res.DataSource(projects).Field("ProjectId").Title("Project").Name("Projects").TextField("text").IdField("id").ColorField("color").Add(); res.DataSource(categories).Field("CategoryId").Title("Category").Name("Categories").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add(); }).Render()
Setting different work hours for each resource
@(Html.EJ().Schedule("schedule").Group(gr => { gr.Resources(Group); }).Resources(res => {res.Field("RoomId").Title("Room").Name("Rooms").ResourceSettings(fields => fields.Datasource(Room).Text("Text").Id("Id").Color("Color").GroupId("GroupId")).Add(); res.Field("OwnerId").Title("Owner").Name("Owners").ResourceSettings(fields => fields.Datasource(Owner).Text("Text").Id("Id").Color("Color").GroupId("GroupId").Start("Start").End("End").WorkWeek("WorkWeek")).Add();}).AppointmentSettings(fields => fields.Datasource(Appoint).Id("Id").Subject("Subject").StartTime("StartTime").EndTime("EndTime").Description("Description").AllDay("AllDay").Recurrence("Recurrence").RecurrenceRule("RecurrenceRule").ResourceFields("RoomId,OwnerId")))
@{
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");
}

@Html.EJS().Schedule("schedule").Group(group => group.Resources(Resources)).Resources(res => { res.DataSource(doctors).Add(); }).Views(view => { view.Option(View.WorkWeek).Add(); view.Option(View.Month).Add(); })).Render()

Group

Behavior API in Essential JS 1 API in Essential JS 2
To group the resources in scheduler layout Property: Resources
@{
List<Projects> projects = new List<Projects>();
projects.Add(new Projects { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new Projects { text = "PROJECT 2", id = 2, color = "#56ca85" });
List<Categories> categories = new List<Categories>();
categories.Add(new Categories { text = "Development", id = 1, color = "#1aaa55" });
categories.Add(new Categories { text = "Testing", id = 2, color = "#7fa900" });
var resources = new string[] { "Projects", "Categories" };
}
@(Html.EJ().Schedule("schedule").Group(group => group.Resources(resources))
Property: Resources
@{
List<Projects> projects = new List<Projects>();
projects.Add(new Projects { text = "PROJECT 1", id = 1, color = "#cb6bb2" });
projects.Add(new Projects { text = "PROJECT 2", id = 2, color = "#56ca85" });
List<Categories> categories = new List<Categories>();
categories.Add(new Categories { text = "Development", id = 1, color = "#1aaa55" });
categories.Add(new Categories { text = "Testing", id = 2, color = "#7fa900" });
var resources = new string[] { "Projects", "Categories" };
}
@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources)).Render()
Allow group editing Property: AllowGroupEdit

@(Html.EJ().Schedule("schedule").Group(group => group.Resources(resources).AllowGroupEdit(true))
Property: AllowGroupEdit

@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources).AllowGroupEdit(true)).Render()
Grouping resources by date Not applicable Property: ByDate

@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources).ByDate(true)).Render()
Grouping resources based on its group ID Not applicable Property: ByGroupId

@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources).ByGroupID(false)).Render()
Enabling compact view on mobile mode Not applicable Property: EnableCompactView

@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources).EnableCompactView(false)).Render()
Header tooltip template Not applicable Property: HeaderTooltipTemplate

@Html.EJS().Schedule("schedule").Group(group => group.Resources(resources).HeaderTooltipTemplate("#resourceHeader")).Render()

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: HeaderRows

@Html.EJS().Schedule("schedule").HeaderRows(headerRow => { headerRow.Option(HeaderRowType.Month).Template("#month-template").Add(); headerRow.Option(HeaderRowType.Week).Template("#week-template").Add(); headerRow.Option(HeaderRowType.Date).Add(); }).Render()

TimeScale

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

@(Html.EJ().Schedule("schedule").TimeScale(ts => ts.Enable(false)))
Property: Enable

@Html.EJS().Schedule("schedule").TimeScale(ts => ts.Enable(false)).Render()
Setting major interval on time scale Property: majorSlot

@(Html.EJ().Schedule("schedule").TimeScale(ts => ts.majorSlot(60)))
Property: Interval

@Html.EJS().Schedule("schedule").TimeScale(ts => ts.Interval(60)).Render()
Setting slot count on time scale Property: minorSlotCount

@(Html.EJ().Schedule("schedule").TimeScale(ts => ts.majorSlot(60).minorSlotCount(6)))
Property: SlotCount

@Html.EJS().Schedule("schedule").TimeScale(ts => ts.Interval(60).SlotCount(6)).Render()
Defining major slot template Property: majorSlotTemplateId

@(Html.EJ().Schedule("schedule").TimeScale(ts => ts.majorSlot(60).minorSlotCount(6).majorSlotTemplateId("#majorSlotTemplate")))
Property: MajorSlotTemplate

@Html.EJS().Schedule("schedule").TimeScale(ts => ts.Interval(60).SlotCount(6).MajorSlotTemplate("#majorSlotTemplate")).Render()
Defining minor slot template Property: minorSlotTemplateId

@(Html.EJ().Schedule("schedule").TimeScale(ts => ts.majorSlot(60).minorSlotCount(6).minorSlotTemplateId("#minorSlotTemplate")))
Property: MinorSlotTemplate

@Html.EJS().Schedule("schedule").TimeScale(ts => ts.Interval(60).SlotCount(6).MinorSlotTemplate("#minorSlotTemplate")).Render()

Quick info templates

Behavior API in Essential JS 1 API in Essential JS 2
Template for quick popup Not applicable Property: QuickInfoTemplates

@Html.EJS().Schedule("schedule").QuickInfoTemplates(quickTemplate => quickTemplate.Header("#headertemplate").Content("#contentTemplate").Footer("#footerTemplate")).Render()

Event settings

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(app => app.DataSource((IEnumerable)ViewBag.datasource)))
Property: DataSource

@Html.EJS().Schedule("schedule").EventSettings(eve => eve.DataSource(ViewBag.datasource)).Render()
Appointment fields Property: AppointmentSettings

@(Html.EJ().Schedule("schedule").AppointmentSettings(app => app.Id("Id").Subject("Subject").Location("Location").AllDay("AllDay").Description("Description").StartTime("StartTime").EndTime("EndTime").Recurrence("Recurrence").RecurrenceRule("RecurrenceRule")))
Property: Fields

@Html.EJS().Schedule("schedule").EventSettings(e => e.Fields(f => f.Id("Id").Subject(sub => sub.Name("Subject")).Location(loc => loc.Name("Location")).IsAllDay(allday => allday.Name("IsAllDay")).Description(desc => desc.Name("Description")).StartTime(st => st.Name("StartTime")).EndTime(et => et.Name("EndTime")).RecurrenceID(recId => recId.Name("RecurrenceId")).RecurrenceRule(recRule => recRule.Name("RecurrenceRule")).RecurrenceException(recEx => recEx.Name("RecurrenceException")).StartTimezone(stz => stz.Name("StartTimezone")).EndTimezone(etz => etz.Name("EndTimezone")))).Render()
Enabling tooltip for appointments Property: Enable

@(Html.EJ().Schedule("schedule").AppointmentSettings(app => app.DataSource(ViewBag.datasource).TooltipSettings(pre => pre.Enable(true)))
Note: Here tooltip setting for events is maintained separately
Property: EnableTooltip

@Html.EJS().Schedule("schedule").EventSettings(eve => eve.DataSource(ViewBag.datasource).EnableTooltip(true)).Render()
Tooltip template for appointments Property: templateId

@(Html.EJ().Schedule("schedule").AppointmentSettings(app => app.DataSource(ViewBag.datasource).TooltipSettings(pre => pre.templateId(#tooltip)))
Property: TooltipTemplate

@Html.EJS().Schedule("schedule").EventSettings(eve => eve.DataSource(ViewBag.datasource).EnableTooltip(true).TooltipTemplate("#toolTip")).Render()
Template for appointments Property: AppointmentTemplateId

@(Html.EJ().Schedule("schedule").AppointmentTemplateId("#appTemplate").AppointmentSettings(app => app.DataSource(ViewBag.datasource)))
Note: Here appointment template is used as simple API
Property: Template

@Html.EJS().Schedule("schedule").EventSettings(eve => eve.DataSource(ViewBag.datasource).Template("#eventTemplate")).Render()
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

@Html.EJS().Schedule("schedule").EventSettings(eve => eve.DataSource(ViewBag.datasource).Query(ViewBag.query)).Render()
Define which resource level’s color to be applied to events Not applicable Property: ResourceColorField

@Html.EJS().Schedule("schedule").Group(group => group.Resources(ViewBag.Resources)).Resources(res => { res.DataSource(ViewBag.Projects).Field("ProjectId").Title("Project").Name("Projects").TextField("text").IdField("id").ColorField("color").Add(); res.DataSource(ViewBag.Categories).Field("CategoryId").Title("Category").Name("Categories").TextField("text").IdField("id").ColorField("color").AllowMultiple(true).Add();}).EventSettings(e => e.ResourceColorField("Projects").DataSource(ViewBag.datasource)).Render()

Methods

Behavior API in Essential JS 1 API in Essential JS 2
To add appointments manually Method: saveAppointment()

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

Script:
<script>
var obj = { <br> 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()

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
var currApp = scheduleobj.getCurrentViewAppointments();
</script>
Method: getCurrentViewEvents()

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.exportSchedule("ActionName","ExportToICS", null);
</script>
Not Applicable
Export scheduler appointments in Excel file Method exportToExcel()

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

Script:
<script>
var scheduleobj= $("#schedule").ejSchedule(instance);
scheduleobj.exportToExcel("ActionName", null, true);
</script>
Not Applicable
Print the scheduler Method print()

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@(Html.EJ().Schedule("schedule").AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.data)))

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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

@Html.EJS().Schedule("schedule").EventSettings(e => e.DataSource(ViewBag.datasource)).Render()

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: ActionBegin

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.ActionBegin("onActionBegin")))

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

@Html.EJS().Schedule("schedule").ActionBegin("onActionBegin").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.ActionComplete("onActionComplete")))

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

@Html.EJS().Schedule("schedule").ActionComplete("onActionComplete").Render()

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

@Html.EJS().Schedule("schedule").ActionFailure("onActionFailure").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.AppointmentHover("onAppointmentHover")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeAppointmentCreate("onBeforeAppointmentCreate")))

Script:
<script>
function onBeforeAppointmentCreate(args) {
}
</script>
Not applicable
Fires before an appointment gets edited Event: BeforeAppointmentChange

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeAppointmentChange("onBeforeAppointmentChange")))

Script:
<script>
function onBeforeAppointmentChange(args) {
}
</script>
Not applicable
Fires before an appointment gets deleted Event: BeforeAppointmentRemove

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeAppointmentRemove("onBeforeAppointmentRemove")))

Script:
<script>
function onBeforeAppointmentRemove(args) {
}
</script>
Not applicable
Fires before the context menu opens on scheduler Event: BeforeContextMenuOpen

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeContextMenuOpen("onBeforeContextMenuOpen")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.CellClick("onCellClick")))

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

@Html.EJS().Schedule("schedule").CellClick("onCellClick").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.CellDoubleClick("onCellDoubleClick")))

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

@Html.EJS().Schedule("schedule").CellDoubleClick("onCellDoubleClick").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.CellHover("onCellHover")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Create("onCreate")))

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

@Html.EJS().Schedule("schedule").Created("onCreated").Render()

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

@Html.EJS().Schedule("schedule").DataBinding("onDataBinding").Render()

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

@Html.EJS().Schedule("schedule").DataBound("onDataBound").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Destroy("onDestroy")))

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

@Html.EJS().Schedule("schedule").Destroyed("onDestroyed").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.onAppointmentClick("AppointmentClick")))

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

@Html.EJS().Schedule("schedule").EventClick("onEventClick").Render()

Script:
<script>
function onEventClick {
}
</script>
Fires on event double click Event: AppointmentDoubleClick

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.AppointmentDoubleClick("onAppointmentDoubleClick")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.KeyDown("onKeyDown")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.MenuItemClick("onMenuItemClick")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Navigation("onNavigation")))

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

@Html.EJS().Schedule("schedule").Navigating("onNavigating").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.AppointmentWindowOpen("onAppointmentWindowOpen")))

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

@Html.EJS().Schedule("schedule").PopupOpen("onPopupOpen").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Drag("onDrag")))

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

@Html.EJS().Schedule("schedule").Drag("onDrag").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.DragStart("onDragStart")))

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

@Html.EJS().Schedule("schedule").DragStart("onDragStart").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.DragStop("onDragStop")))

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

@Html.EJS().Schedule("schedule").DragStop("onDragStop").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.OverflowButtonClick("onOverflowButtonClick")))

Script:
<script>
function onOverflowButtonClick(args) {
}
</script>
Not applicable
Fires on overflow button hover Event: OverflowButtonHover

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.OverflowButtonHover("onOverflowButtonHover")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Reminder("onReminder")))

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.Resize("onResize")))

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

@Html.EJS().Schedule("schedule").Resize("onResize").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.ResizeStart("onResizeStart")))

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

@Html.EJS().Schedule("schedule").ResizeStart("onResizeStart").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.ResizeStop("onResizeStop")))

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

@Html.EJS().Schedule("schedule").ResizeStop("onResizeStop").Render()

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

@(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.QueryCellInfo("onQueryCellInfo")))

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

@Html.EJS().Schedule("schedule").RenderCell("onRenderCell").Render()

Script:
<script>
function onRenderCell(args) {
}
</script>
Fires before the event rendering on UI Not applicable Event: EventRendered

@Html.EJS().Schedule("schedule").EventRendered("onEventRendered").Render()

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