Scheduler height issue for event

[Satheesh Kumar]

Hi

I am using your react scheduler component in which i am using resource grouping and event template. I have a requirement where i wanted to achieve template with auto height for resource grouping and also i want to achieve auto height for event as well as cell. I have attached a screenshot for reference.

Can you please help me achieve this?

Thanks

Jagan

[Ashokkumar Karuppasamy]

Hi Satheesh Kumar,

You can achieve your requirement by using the schedule's rowAutoHeight property to meet your needs. Please try this solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-lfaquj-9ynfc6?file=index.js

  <ScheduleComponent cssClass='schedule-cell-dimension' width='100%' height='650px' rowAutoHeight={true} ref={scheduleObj} selectedDate={new Date(2021, 1, 15)} eventSettings={{ dataSource: data }} eventRendered={onEventRendered}>

 

Regards,
Ashok

[Satheesh Kumar]

Hi

Thanks for your quick reply. I used rowheight as you said but still i am not able to achieve what i required(you can refer the screenshot i attached in my question). My requirement is that I am using resource grouping and also disabled the timescale and I am using Timeline Views. Also I have an event template with more than 3 rows but the event height is not extending beyond certain height and my 3rd line is not visible.

You can refer the same in the following. 

https://stackblitz.com/edit/react-lfaquj-cb9jzy?file=index.js

Please clarify if I am missing anything.

Thanks

[Ashokkumar Karuppasamy]

Hi Satheesh Kumar,

If you override the heights for specific appointments, there may be overlap. In such cases, we suggest increasing the event height for all appointments in the schedule. You can customize the schedule event styles using the cssClass property to overwrite the event styles and meet your requirements. The attached code snippet and sample below demonstrate the solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/react-lfaquj-x9uqgg?file=index.js,index.css,package.json,index.html

[Index.css]

.schedule-cell-dimension.e-schedule .e-timeline-view .e-appointment, 

.schedule-cell-dimension.e-schedule .e-timeline-month-view .e-appointment {

    height: 100px;

}

[index.js]

    <ScheduleComponent

      width="100%"

      height="550px"

      cssClass = "schedule-cell-dimension"

      currentView="TimelineWeek"

      selectedDate={new Date(2018, 3, 1)}

      eventSettings={eventSettings}

      group={group}

      timeScale={{

        enable: false,

        interval: 30,

        slotCount: 1,

        majorSlotTemplate: null,

        minorSlotTemplate: null,

      }}

      rowAutoHeight={true}

    >

 

Screenshots:

Regards,
Ashok

[Satheesh Kumar]

Thanks for your reply. I will change the style and try to achieve my desired output.

[Ashokkumar Karuppasamy]

Hi Satheesh Kumar 

You're welcome! Please check the provided solution and let us know if you need any further assistance.
 

Best regards,

Ashok

[Satheesh Kumar]

Hi

I have 1 more requirement. In the same calendar, when mouse is hovered over each cell i want to show 2 small hyperlink or buttons which are bottom aligned to the cell. These buttons are applicable for all cells with or without appointments. On clicking, 1 button, i want to show dialog for add functionality and on clicking another i want to navigate or show another div for view functionality. I tried using cell template logic but had couple of issues like:

1.buttons not getting bottom aligned

2.performance of calendar becomes slow

Can you please help me to achieve this with better performance?

Thanks 

[Ashokkumar Karuppasamy]

Hi Satheesh Kumar,

We have created a separate forum for the last query. Please follow the forum link to access the updates accordingly.

https://www.syncfusion.com/forums/187725/schedule-cell-customization-from-187047

Regards,
Ashok