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 : Nov 16th 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?

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) {

            this._renderQuickWindow();

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

this._quickAppDetailsWindow.find(".descValue").html(args.appointment.Description);

            else

                this._quickAppDetailsWindow.find(".descValue").html("");

            $(".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");

            else

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

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

            obj._quickAppDetailsWindow.blur();

 }

 

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

       this._quickAppointWindow.find(".Description").val("");

 }

 

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

 

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

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