Appointments with various heights

[Jessica]

I would like to set various height for different types of events. Currently, I am doing this by applying a class to the element in (eventRendered) which sets the height of the appointment.

This is working, however the height of the row and the spacing between the events is not responding to the change in height

Is there a way to set the row height? Or a different way to have events with different heights? 

[Balasubramanian Sattanathan]

Hi Jessica, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and let you know that we can achieve this by providing the rowAutoHeight property as true. It will be used to auto-adjust the height of the work-cells based on the number of appointments present in those time ranges. And also we can change the appointment height for different events once an appointment height is customized, rendering more than one appointment in the same cell/day will cause an overlapping issue 

UG: https://ej2.syncfusion.com/angular/documentation/schedule/row-auto-height/ 

Online demo: https://ej2.syncfusion.com/angular/demos/#/material/schedule/adaptive-rows 

Sample: https://stackblitz.com/edit/angular-row-auto-height?file=app.component.ts 

Kindly try and refer to the above links, let us know if you need further assistance. 

Regards, 

Balasubramanian S 

[Jessica]

Thanks for your replay, 

I am already using rowAutoHeight = true. 

I was just hoping you had a solution to avoid overlapping like this:

 

Do you know if there is anyway I can update the height of the row manually?

[Jessica]

Or do you have a way to re calculate the position each appointment card is on the screen?

That is more important because when they overlap they are unreadable:

[Balasubramanian Sattanathan]

Hi Jessica, 

Thanks for your reply. 

We have checked your reported problem at our end and let you know that we have consider this scenario as bug at our end. So we logged the below bug report. The fix will be included in our weekly patch release which is expected to roll out on December 7, 2020. We would appreciate your valuable patience. You can track the status by using the below link. 

Feedback: https://www.syncfusion.com/feedback/19967/the-appointments-are-misaligned-when-rowautoheight-is-true 

Regards, 

Balasubramanian S 

[Balasubramanian Sattanathan]

Hi Jessica, 

Greetings from Syncfusion support..! 

We are glad to announce that our Essential Studio 2020 Volume 4 Release v18.4.0.30  is rolled out successfully. In this release, the reported defect in event height is set as custom height and rowAutoHeight property is enabled, the overlapping issue will occur when schedule more than one event at a time has been resolved at our end. Kindly upgrade your packages to the latest version to avail of this fix. 

Demo: https://stackblitz.com/edit/angular-row-auto-height-w9v6b4?file=app.component.ts  

Release notes: https://ej2.syncfusion.com/angular/documentation/release-notes/18.4.30/?type=all#schedule 

Feedback: https://www.syncfusion.com/feedback/19967/the-appointments-are-misaligned-when-rowautoheight-is-true 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Balasubramanian S