We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejSchedule

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();
                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>";
            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(".status").ejCheckBox({ checked: args.appointment.Status });
            else {
                // if double clicked on the cells, clears the field values.
                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,
                    Subject = value.Subject,
                    AllDay = value.AllDay,
                    Recurrence = value.Recurrence,
                    RecurrenceRule = value.RecurrenceRule,
                    Organizer = value.Organizer,
                    Status = value.Status
            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);
                    foreach (var apps in param.deleted)
                        Appointment app = db.Appointments.Where(c => c.Id == apps.Id).FirstOrDefault();
                        if (apps != null) db.Appointments.DeleteOnSubmit(app);
            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;
            IEnumerable data = new ScheduleDataDataContext().Appointments.Take(200);
            return Json(data, JsonRequestBehavior.AllowGet);




Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-61329619                                                                                                                                                                                          

Default appointment window with customized fields

Figure 1: Default appointment window with customized fields.

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile