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 sign in to leave a comment
Access denied
Access denied