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

Platform: jQuery |
Control: ejSchedule

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.

Customized quick window displaying on appointment click

Figure 1: Customized quick window displaying on appointment click.

Customized quick window displaying on cell 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.

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