Articles in this section
Category / Section

How to customize the default appointment window of Schedule and perform CRUD actions through it?

3 mins read

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                                                                                                                                                                                          

Default appointment window with customized fields

Figure 1: Default appointment window with customized fields.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied