How to customize the default appointment window of Schedule and perform CRUD actions through it?
The following steps shows the way to customize the default appointment window.
Step 1: Create an MVC application and include the Schedule control in it using this link.
Step 2: Bind the appointmentWindowOpen event as shown below,
$(function () { var dataManager = ej.DataManager({ // get the appointment data from the specified controller action url: '@Url.Action("GetData","Home")', // This will trigger to bind the appointment data initially to the Schedule control crudUrl: '@Url.Action("Batch","Home")', // This will trigger while performing CRUD operation on the Scheduler appointments crossDomain: true }); dataManager.adaptor = new ej.UrlAdaptor(); $("#Schedule1").ejSchedule({ width: "100%", height: "525px", currentDate: new Date(2015, 5, 15), appointmentSettings: { dataSource: dataManager, id: "Id", subject: "Subject", startTime: "StartTime", endTime: "EndTime", startTimeZone: "StartTimeZone", endTimeZone: "EndTimeZone", allDay: "AllDay", recurrence: "Recurrence", recurrenceRule: "RecurrenceRule" }, appointmentWindowOpen: "onAppointmentWindowOpen" }); });
Step 3: Define the appointmentWindowOpen event function OnAppointmentWindowOpen which contains the code to customize the default appointment window. The following code example shows the logic.
function onAppointmentWindowOpen(args) { // to add custom element in default appointment window if (this._appointmentAddWindow.find(".customfields").length == 0) { var customDesign = "<tr class='customfields'><td class='e-textlabel'>Organizer</td><td colspan='3'><input class='organizer e-inputtext' type='text' name='Organizer'/></td></tr><tr class='customfields'><td class='e-textlabel'>Event completed </td><td><input class='status' type='checkbox' name='Status'/></td></tr>"; this._appointmentAddWindow.find(".e-appwindow").find(".e-table").eq(0).find("tbody").eq(0).append(customDesign); this._appointmentAddWindow.find(".e-appwindow").find(".beverages,.catering").ejCheckBox(); } if (!ej.isNullOrUndefined(args.appointment)) { // if double clicked on the appointments, retrieve the custom field values from the appointment object and fills it in the appropriate fields. this._appointmentAddWindow.find(".organizer").val(args.appointment.Organizer); this._appointmentAddWindow.find(".status").ejCheckBox({ checked: args.appointment.Status }); } else { // if double clicked on the cells, clears the field values. this._appointmentAddWindow.find(".organizer").val(""); this._appointmentAddWindow.find(".status").ejCheckBox({ checked: false }); } }
Step 4: To perform CRUD operations with the additional custom field, use the below code.
public JsonResult Batch(EditParams param) { if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments { var value = param.action == "insert" ? param.value : param.added[0]; int intMax = db.Appointments.ToList().Count > 0 ? db.Appointments.ToList().Max(p => p.Id) : 1; DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); Appointment appoint = new Appointment() { Id = intMax + 1, StartTime = startTime, EndTime = endTime, StartTimeZone=value.StartTimeZone, EndTimeZone=value.EndTimeZone, Subject = value.Subject, AllDay = value.AllDay, Recurrence = value.Recurrence, RecurrenceRule = value.RecurrenceRule, Organizer = value.Organizer, Status = value.Status }; db.Appointments.InsertOnSubmit(appoint); db.SubmitChanges(); } if (param.action == "remove" || param.deleted != null) // this block of code will execute while removing the appointment { if (param.action == "remove") { int key = Convert.ToInt32(param.key); Appointment app = db.Appointments.Where(c => c.Id == key).FirstOrDefault(); if (app != null) db.Appointments.DeleteOnSubmit(app); } else { foreach (var apps in param.deleted) { Appointment app = db.Appointments.Where(c => c.Id == apps.Id).FirstOrDefault(); if (apps != null) db.Appointments.DeleteOnSubmit(app); } } db.SubmitChanges(); } if ((param.action == "batch" && param.changed != null) || param.action == "update") // this block of code will execute while updating the appointment { var value = param.action == "update" ? param.value : param.changed[0]; var filterData = db.Appointments.Where(c => c.Id == Convert.ToInt32(value.Id)); if (filterData.Count() > 0) { DateTime startTime = Convert.ToDateTime(value.StartTime); DateTime endTime = Convert.ToDateTime(value.EndTime); Appointment appoint = db.Appointments.Single(A => A.Id == Convert.ToInt32(value.Id)); appoint.StartTime = startTime; appoint.EndTime = endTime; appoint.StartTimeZone = value.StartTimeZone; appoint.EndTimeZone = value.EndTimeZone; appoint.Subject = value.Subject; appoint.Recurrence = Convert.ToByte(value.Recurrence); appoint.AllDay = value.AllDay; appoint.RecurrenceRule = value.RecurrenceRule; appoint.Organizer = value.Organizer; appoint.Status = value.Status; } db.SubmitChanges(); } IEnumerable data = new ScheduleDataDataContext().Appointments.Take(200); return Json(data, JsonRequestBehavior.AllowGet); }
Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-61329619
Figure 1: Default appointment window with customized fields.