Search results

Migration from Essential JS 1 in ASP.NET MVC Schedule control

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>