Customize look and feel of the Schedule QuickWindow

[Adam Murray]

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]

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. 

https://jsplayground.syncfusion.com/goe4xf4w 

 

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]

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]

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. 

 https://jsplayground.syncfusion.com/pmuqs50e 

 

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

Thank you. That helped alot.

[Karthigeyan Krishnamurthi]

Hi Adam,   

 

We are happy that our solution has fulfilled your requirement. 

 

Please let us know if you further assistance. 

 

Regards, 

Karthigeyan 

[Adam Murray]

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]

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

nevermind.

[Karthigeyan Krishnamurthi]

Hi Adam,     

   

Thanks for your update.   

   

We request you to confirm whether issue is still reproducing at your end?    

   

Regards,   

Karthigeyan   

 

[Adam Murray]

It is not reproducing, we are good, thanks.

[Karthigeyan Krishnamurthi]

Hi Adam,    

  

We are happy to hear that your issue has been fixed. 

  

Regards,  

Karthigeyan