Appointment card customization

[Ankush Sharma]

We have a requirement where we need a custom layout for the appointment card(s) where we can place certain icons and on hovering on those icons we can able to see the details. I am also attaching a file for the requirement we have. We want to replicate on Syncfusion Scheduler.

[Tony]

Looks like you forgot to attach the file Ankush.

[Karthigeyan Krishnamurthi]

Hi Ankush, 

 

Syncfusion greetings. 

 

Kindly refer the below links to customize the event using template option. 

https://ej2.syncfusion.com/react/demos/#/material/schedule/event-template 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/?no-cache=1#using-template 

 

Kindly refer the below link to know more about the event tooltip option. 

https://ej2.syncfusion.com/react/demos/#/material/schedule/tooltip 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/?no-cache=1#customizing-event-tooltip-using-template 

 

Note: Files is not attached.  

 

Regards, 

Karthi 

 

[Ankush Sharma]

Here is the attachment

Attachment: Scheduler_appointment_card_layout_8ecfeb5a.zip

[Karthigeyan Krishnamurthi]

Hi Ankush,  

 

Thanks for the image. 

 

We have prepared the below sample to customize the event like below. 

https://stackblitz.com/edit/react-eydfpo-whimdk?file=index.js 

 

 

 

Regards, 

Karthi 

 

[Ivan Pohorilyi]

Hi guys, what is the workaround for those who use typescript?

Attachment: schedule_f4d27f82.zip

[Hareesh Balasubramanian]

Hi Ivan, 

We have validated your shared image at our end. And we suspect that your requirement is to get the previously updated sample as the Typescript format. And for the same we have modified our previously updated same sample in the Typescript format and it can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/145800/ze/sample267275330  

And for further reference, kindly refer the below UG link, 

https://ej2.syncfusion.com/react/documentation/schedule/appointments/#appointment-customization 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh