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 add additional controls and customize the default quick window?

Platform: JavaScript |
Control: ejSchedule |
Published Date: November 20, 2017 |
Last Revised Date: November 20, 2017

The following steps shows the way to customize the Quick window.


Step 1:  Create a scheduler default sample by referring this link and bind the create, cellClick, appointmentClick, beforeAppointmentCreate events as shown below,  

Step 2: Define all those above mentioned events with event functions such as OnCreate, OnCellClick, OnAppointmentClick, and OnBeforeAppointmentCreate, which contains the code to customize the quick window.

Within the OnCreate function, the code to add custom fields in the quick window is defined.

function OnCreate(args) {


            if ($(".customfields1").length == 0) {

                var customDesign1 = "<tr class='customfields1'><td class='customlabel'>Description</td><td><input name='Description' class='Description' type='text'/></td></tr>";

                var customDesign = "<tr class='customfields'><td><div class='descValue'/></td></tr>";

                $(".e-subjectlabel").parent().after(customDesign1); // here we are adding the custom fields in quick window

                $(".e-quicksubject").parent().parent().after(customDesign); // here we are adding the custom fields in app quick window

                $(".e-detailedwindow").css("display", "none");




Within the OnAppointmentClick function, the code to change the date format of quick appointment detail window and to get the custom field value is defined.

function OnAppointmentClick(args) {

            if (!ej.isNullOrUndefined(args.appointment.Description))




            $(".e-quickbottomcontainer").find(".e-floatright").css("display", "none"); //to hide edit appointment button

            appointment = args.appointment;

            var x = document.getElementById("Schedule1AppDetailsWindow");

            x.addEventListener("focus", myFocusFunction);



        function myFocusFunction() { // this will be called when the quick window is focused

            var obj = $("#Schedule1").data("ejSchedule")

            if (appointment.StartTime.getDate() != appointment.EndTime.getDate())

                dateShow = ej.format(appointment.StartTime, "MMMM dd") + " - " + ej.format(appointment.EndTime, "MMMM dd");


                dateShow = ej.format(appointment.StartTime, "MMMM dd")

            obj._quickAppDetailsWindow.find('.e-quickstartendtime').html(dateShow); //to change the time format in quick window header




Within the OnClick function, the code to change the date format of quick window is defined.

function OnCellClick(args) {

       args.quickString = ej.format(args.startTime, "dddd MMMM dd yyyy");




Within the OnBeforeAppointmentCreate function, the code to save an appointment with custom field is defined.

function OnBeforeAppointmentCreate(args) {

            args.appointment["Description"] = this._quickAppointWindow.find('.Description').val(); //to save description while saving the appointment



Sample: http://jsplayground.syncfusion.com/1gpikzyo

Step 3: Run the above sample and the quick window will be displayed with customizations as shown below.

Figure 1: Customized quick window displaying on appointment click.

Figure 2: Customized quick window displaying on cell click


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.

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