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.
Unfortunately, activation email could not send to your email. Please try again.

Customize look and feel of the Schedule QuickWindow

Thread ID:

Created:

Updated:

Platform:

Replies:

130191 Apr 26,2017 03:54 PM Jun 2,2017 12:11 AM JavaScript 10
loading
Tags: ejSchedule
Adam Murray
Asked On April 26, 2017 03:54 PM

How can we customize the look and feel of the quick window to match the styling and data we have in the tooltip template?

We need to make the quick window look different but we also need to add buttons based on the state of the data.
If Status == missed
     display button "ReSchedule"
else if Status == Scheduled
     display button "Cancel"
     display button "Completed"
     display button "Edit"

All data is currently already loaded into the appointment object but we need to display it whereas the current quick window does not. Such data is Status, Type, Location and Care Manager

Here is a screen shot of what we wish it to look like:


Here is the current look we have ATM:


Is this possible?

Thanks
Adam

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 27, 2017 04:59 AM

Hi Adam  
   
Thank you for contacting Syncfusion support. 
  
We have prepared the below sample to customize the quick window based on the appointment field value. 
 
When an appointment is clicked, appointmentClick event will be raised where we can access the appointment fields and customize the quick window. Kindly refer the below code example used in the sample. 
 
<Code> 
function OnAppointmentClick(args) { 
            if ($(".customfields").length == 0) { 
                var customDesign = "<tr class='customfields'><td><button id='button11'>ReSchedule</button></td><td><button id='button12'>Completed</button></td></tr>"; 
                $(".e-quicksubject").parent().parent().after(customDesign); // here we are adding the custom fields in app quick window 
            } 
            if (args.appointment.Status == "Missed") { 
                $("#button12").parent().css("display", "none"); 
                $("#button11").parent().css("display", ""); 
            } 
            else { 
                $("#button11").parent().css("display", "none"); 
                $("#button12").parent().css("display", ""); 
            } 
        } 
</Code> 
 
Regards,   
Karthigeyan   
 
 


Adam Murray
Replied On April 27, 2017 12:32 PM

Thanks, this looks like it may work!BTW, how can we hide the default Edit Appointments? I have tried following but it still shows.$(".e-quickbottomcontainer").find(".e-floatright").css("display", "none");Also, is it possible to widen the quick window? The Status is supposed to be on the same line as the dates.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On April 28, 2017 02:57 AM

Hi Adam,         
         
Thanks for your update. 
 
We have prepared the sample to hide the Edit Appointment option in appointment quick window which can be viewed from the below link. Currently there is no option to customize the quick window width. 
 
<Code> 
function OnAppointmentClick(args) { 
            if ($(".customfields").length == 0) { 
                var customDesign = "<tr class='customfields'><td><button id='button11'>ReSchedule</button></td><td><button id='button12'>Completed</button></td></tr>"; 
                $(".e-quicksubject").parent().parent().after(customDesign); // here we are adding the custom fields in app quick window 
            } 
            if (args.appointment.Status == "Missed") { 
                $("#button12").parent().css("display", "none"); 
                $("#button11").parent().css("display", ""); 
            } 
            else { 
                $("#button11").parent().css("display", "none"); 
                $("#button12").parent().css("display", ""); 
            } 
            $(".e-quickbottomcontainer").find(".e-floatright").css("display", "none"); 
        } 
</Code> 
   
Regards,     
Karthigeyan     


Adam Murray
Replied On May 1, 2017 11:55 AM

Thank you. That helped alot.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On May 2, 2017 12:06 AM

Hi Adam,   
 
We are happy that our solution has fulfilled your requirement. 
 
Please let us know if you further assistance. 
 
Regards, 
Karthigeyan 


Adam Murray
Replied On May 31, 2017 01:28 PM

We have implemented this technique and it worked wonderfully until we upgraded to version 15.2. now it seems the onClick event is not firing.
function OnAppointmentClick(args) {
        //console.log("OnAppointmentClick");
        $("#userCalendar").ejSchedule({ 
tooltipSettings: { enable: false }
        });

        if ($(".customfields").length == 0) {
        // create the new custom field
        var customData = $('\
<form id="appointmentForm" method="post" class="customfields"> \
<tr> \
<td> \
<span class="dateValue" style="font-size: 13px;"/> \
<strong><span class="statusValue pull-right" style="font-size: 11px;"></span></strong><br/> \
<strong><span class="typeValue" /></strong><br/> \
<span class="locationValue text-active"/><br/> \
<span class="cmValue text-caremanager"/><br/> \
<span class="descValue text-muted"/><br/> \
</td> \
</tr> \
<tr> \
<td> \
<button id="appointment-reschedule" class="btn btn-primary btn-sm"><i class="fa fa-calendar-check-o"></i> ReSchedule</button> \
<button id="appointment-edit" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i> View Details</button> \
<button id="appointment-complete" class="btn btn-primary btn-sm"><i class="fa fa-save"></i> Complete</button> \
</td> \
</tr> \
</form>');
        $(".e-quicksubject").parent().parent().after(customData); // here we are adding dates after patient name
        }

        //$(".e-quickbottomcontainer").find(".e-floatright").css("display", "none");
        appointment = args.appointment;
        //var detailsWindow = document.getElementById("userCalendarAppDetailsWindow");
        //detailsWindow.addEventListener("focus", onCalendarDetailsWindowFocus);
        onCalendarDetailsWindowFocus();
// configure button arrangment
        if (args.appointment.AppointmentStatus.toUpperCase() == "MISSED") {
        // appt was missed so only can be resched
        $("#appointment-complete").css("display", "none");
        $("#appointment-edit").css("display", "none");
        $("#appointment-reschedule").css("display", "");
        $("#appointment-reschedule").on('click', function (e) { onClickViewDetailsButton() });
        }
        else if (args.appointment.AppointmentStatus.toUpperCase() == "SCHEDULED") {
// show both View Details and Complete
        $("#appointment-reschedule").css("display", "none");
        $("#appointment-edit").css("display", "");
        $("#appointment-complete").css("display", "");
        $("#appointment-complete").on('click', function (e) { onClickCompleteButton(); });
        $("#appointment-edit").on('click', function(e) { onClickViewDetailsButton(); });
}
        else { // view only; no longer completable
        $("#appointment-reschedule").css("display", "none");
        $("#appointment-edit").css("display", "");
        $("#appointment-complete").css("display", "none");
        $("#appointment-edit").on('click', function (e) { onClickViewDetailsButton(); });
        }
        }

Adam Murray
Replied On May 31, 2017 02:45 PM

Actually it appears we are calling blur event inside focus event capture and creating a loop.

nevermind.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On June 1, 2017 06:47 AM

   
Thanks for your update.   
   
We request you to confirm whether issue is still reproducing at your end?    
   
Regards,   
Karthigeyan   
 


Adam Murray
Replied On June 1, 2017 01:43 PM

It is not reproducing, we are good, thanks.

Karthigeyan Krishnamurthi [Syncfusion]
Replied On June 2, 2017 12:11 AM

Hi Adam,    
  
We are happy to hear that your issue has been fixed. 
  
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.

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.

;