Migration from Essential JS 1
17 Feb 202224 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: 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")))
|
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: 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))
|
Property: RowAutoHeight @Html.EJS().Schedule("schedule").RowAutoHeight(true).Render()
|
| 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","null", null); </script>
|
Not Applicable |
| Export scheduler events to ICS |
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>
|
Method: exportToICalendar() @Html.EJS().Schedule("schedule").Render() Script: <script>var scheduleobj= document.getElementById('schedule').ej2_instances[0]; scheduleObj.exportToICalendar(); </script>
|
| Import scheduler events from ICS | Not Applicable |
Method: importICalendar() @Html.EJS().Schedule("schedule").Render() Script: <script>var scheduleobj= document.getElementById('schedule').ej2_instances[0]; scheduleObj.importICalendar(); </script>
|
| 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>
|
Method: exportToExcel() @Html.EJS().Schedule("schedule").Render() Script: <script>var scheduleobj= document.getElementById('schedule').ej2_instances[0]; scheduleObj.exportToExcel(); </script>
|
| 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>
|
Event: actionBegin @Html.EJS().Schedule("schedule").ActionBegin(onActionBegin).Render() Script: <script> function onActionBegin(args) { if(args.requestType == 'eventCreate')} </script>
|
| Fires before an appointment gets edited |
Event: BeforeAppointmentChange @(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeAppointmentChange("onBeforeAppointmentChange"))) Script: <script> function onBeforeAppointmentChange(args) { } </script>
|
Event: actionBegin @Html.EJS().Schedule("schedule").ActionBegin(onActionBegin).Render() Script: <script> function onActionBegin(args) { if(args.requestType == 'eventChange')} </script>
|
| Fires before an appointment gets deleted |
Event: BeforeAppointmentRemove @(Html.EJ().Schedule("schedule").ScheduleClientSideEvents(e=>e.BeforeAppointmentRemove("onBeforeAppointmentRemove"))) Script: <script> function onBeforeAppointmentRemove(args) { } </script>
|
Event: actionBegin @Html.EJS().Schedule("schedule").ActionBegin(onActionBegin).Render() Script: <script> function onActionBegin(args) { if(args.requestType == 'eventRemove')} </script>
|
| 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>
|
Event: popupOpen @Html.EJS().Schedule("schedule").PopupOpen("onPopupOpen").Render() Script: <script> function onPopupOpen(args) { if(args.requestType == 'eventContainer')} </script>
|
| 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>
|
You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to knows how to present and manipulate data.