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

Change Quick Window.

Thread ID:

Created:

Updated:

Platform:

Replies:

129161 Mar 1,2017 05:35 PM UTC Mar 3,2017 11:56 AM UTC JavaScript 3
loading
Tags: ejSchedule
James
Asked On March 1, 2017 05:35 PM UTC

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 [Syncfusion]
Replied On 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 


James
Replied On 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?




Karthigeyan Krishnamurthi [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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

;