how to show 3 events in resource timeline month view on a single day before showing the more events link?

[Harmeet Dhaliwal]

Hi,

I am working on a resource timeline month view scheduler. There is a property called 'rowAutoHeight' which determines whether to display all events on a day or only show one event and add a "view more" link afterwards. I want to display three events on the scheduler and the remaining events under "view more" if there are more than three. Is there any way to achieve this?

here is a sample if you want to replicate: https://stackblitz.com/edit/react-zu2qyd?file=index.js

[Mugilraj Govindarajan]

Hi Harmeet,

We suggest you adjust the work cells height based on your appointment’s visibility count 3 by overriding the default CSS of the Schedule as shown in the below code snippet and remove the `rowAutoHeight` property which is bind to the scheduler.  We had prepared a sample based on your requirement and let us know if you need further assistance.

Sample : https://stackblitz.com/edit/react-zu2qyd-xsspjc?file=index.js,index.css

Demo: https://ej2.syncfusion.com/react/demos/#/material/schedule/cell-dimension

API: https://ej2.syncfusion.com/react/documentation/api/schedule/#cssclass

[index.js]

const AdaptiveRows = () => {

    return (

        <ScheduleComponent ref={schObj} cssClass='adaptive-rows' >

        </ScheduleComponent>

    );

};

export default AdaptiveRows;

[index.css]

  .adaptive-rows.e-schedule .e-timeline-view .e-work-cells,

.adaptive-rows.e-schedule .e-timeline-month-view .e-work-cells,

.adaptive-rows.e-schedule .e-timeline-view .e-resource-cells,

.adaptive-rows.e-schedule .e-timeline-month-view .e-resource-cells {

    height: 140px;

}

Regards,

Mugilraj G