Articles in this section
Category / Section

How to add additional controls and customize the default quick window?

5 mins read

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



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

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied