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

Change Quick Window.

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



3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team March 2, 2017 12:10 PM UTC

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



JA James March 2, 2017 05:36 PM UTC

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?





KK Karthigeyan Krishnamurthi Syncfusion Team March 3, 2017 11:56 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon