Change Quick Window.

[James]

Hey

I was wondering if there is a way to edit the quick window easily? 

I.e We want to keep the Delete and 'X' option (but remove the edit options). As well as remove the times (but keep the dates). As well as showing some other things like the description.

I see there is an easy way to add a template to tooltip but I've yet to see it with the quickwindow.

(the quick window being the window that shows up when you click on an appointment).

I started doing an ej.dialog, but have been running into some issues. Such as it's position and how to make the delete button work. I wonder if that is the correct way?, Or is there a simpler approach?

Thanks

[Karthigeyan Krishnamurthi]

Hi James, 

 

Thank you for contacting Syncfusion support. 

 

We have prepared the sample to customize the quick window as per requirement which can be viewed from the below link. Kindly refer the below code example used in the sample. 

http://jsplayground.syncfusion.com/rrbonrft 

 

<Code> 

function OnAppointmentClick(args) { // this function will be called when an app is clicked 

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

        } 

function OnBeforeAppointmentCreate(args) { // this function will be called before saving an app 

            args.appointment["Description"] = this._quickAppointWindow.find('.Description').val(); 

        } 

function OnCellClick(args) { // this function will be called when cell is clicked 

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

            } 

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

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

        } 

</Code> 

Regards, 

Karthigeyan 

[James]

Hey Thankyou!

This works mostly.

The only thing is that the Date/Time stays the same (this is both on ur example and the one i've implemented personally)

We want to change it so it only shows the date.

I.e Instead of June 3rd 10:00 am - June 4th 11:00am

It will say June 3rd - June 4th

the args.quickString thing seems to be undefined?

[Karthigeyan Krishnamurthi]

Hi James,  

 

Thanks for your update. 

 

We have prepared the sample to display only the date information in quick window which can viewed from the below link. 

http://jsplayground.syncfusion.com/tgsidhnk 

 

Kindly refer the below code example used in the sample. 

 

<Code> 

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

            appointment = args.appointment; 

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

            x.addEventListener("focus", myFocusFunction); 

 

        } 

function myFocusFunction() { // function 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); 

            obj._quickAppDetailsWindow.blur(); 

        } 

</Code> 

 

Regards, 

Karthigeyan