TimelineYear does not set appointment height or add spacing

[Aske Holst]

I'm trying to style my appointments in TimelineYear similar to the other timelines. But I get strange results.

- There is no space between appointments

- The height is not set according to styling

Timeline month: a few pixels of space anad two lines visible - as expected.

TimelineYear (vertical): no space and only one line visible - not as expected

I used this sample https://ej2.syncfusion.com/demos/#/material/schedule/timeline-resource-grouping.html and just added a TimelineYear, orientation: vertical

[Ashokkumar Karuppasamy]

Hi Aske Holst,

Q1)There is no space between appointments

In this timeline year view, the event width is fully occupied in the cells. We suggest customizing the width and overriding the styles to meet your requirements. Please refer to the code below.

  <style>

            .year-view.e-schedule .e-timeline-year-view .e-resource-column-table,

            .year-view.e-schedule .e-timeline-year-view .e-resource-left-td {

                width: 120px;

            }

 

            .year-view.e-schedule .e-timeline-year-view .e-appointment {

              width: 90px !important;

              margin: 0 5px 0 5px; 

              height: 60px 

            }

 

            .col-lg-2.property-section .property-panel-table td {

                padding-bottom: 1rem;

            }

        </style>

 

Q2)The height is not set according to styling;

We have checked on our end and encountered no issues. We have attached a sample for your reference below. Please try it and let us know if you need any further assistance. If you still face issues, please share the details of the issues replicating in our shared samples.

  <style>

            .year-view.e-schedule .e-timeline-year-view .e-resource-column-table,

            .year-view.e-schedule .e-timeline-year-view .e-resource-left-td {

                width: 120px;

            }

 

            .year-view.e-schedule .e-timeline-year-view .e-appointment {

              width: 90px !important;

              margin: 0 5px 0 5px; 

              height: 60px 

            }

 

            .col-lg-2.property-section .property-panel-table td {

                padding-bottom: 1rem;

            }

        </style>

Sample: https://stackblitz.com/edit/pw9bfu-tllzzq?file=index.ts,index.html



Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.