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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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();


                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

Figure 1: Default appointment window with customized fields.



Article ID: Published Date: Last Revised Date: Platform: Control:
8214 12/01/2017 12/01/2017 JavaScript ejSchedule
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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