How can I automatically collapse the appointment content when the calendar row height is fixed?

HI  

       I want to fix the height of the calendar control so that multiple appointment calendars can automatically collapse. I've adjusted the height style of the calendar control, but the appointments aren't shrinking according to the height of the cells. How should I set the height?


Image_2557_1763711173464


3 Replies

VR Vijay Ravi Syncfusion Team November 24, 2025 07:56 AM UTC

Hi aquan,

Greetings from Syncfusion Support.
 

We have reviewed your request. We recommend using the Schedule rowAutoHeight feature. This feature automatically adjusts the scheduler’s row height to fit appointments as they are rendered. Please refer to the documentation and demo linked below for more details.

RowAutoHeight UG: https://ej2.syncfusion.com/angular/documentation/schedule/row-auto-height
https://ej2.syncfusion.com/angular/documentation/api/schedule/index-default#rowautoheight

RowAutoHeight Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/schedule/adaptive-rows


Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay



AQ aquan November 26, 2025 01:25 AM UTC

HI  


    I am aware of the rowAutoHeight property. I didn't want the individual calendars to be so tall, so I wondered if the reservation data inside could automatically shrink after fixing the height, which led to the question I raised at the beginning.



VR Vijay Ravi Syncfusion Team November 26, 2025 10:46 AM UTC

Hi Aquan,
 

We have reviewed your query and validated it against your requirements. Events will render within the available space of each cell slot. When the combined event height exceeds the cell’s capacity, a “+ More” indicator is automatically displayed, and clicking it shows the full list of appointments for that slot. Or you can use custom CSS to reduce the visual height of appointments; however, automatically shrinking appointment height to fit within the cell slot is not supported. Please share the additional details below for further investigation.

 

  1. Share a minimal sample that replicates the problem, or
  2. Replicate the issue video demo
  3. Share the entire code snippets,

 

Please get back to us with the required details for further assistance.


Regards,

Vijay


Loader.
Up arrow icon