How to resize the width of day columns in timeline year view

[Gertjan de Vries]

Hello all,

What is the best way to change the width of the day cells in the time year view? I use CSS to change the width from 60px to 30px but after then the events are not rendered at the right position. This event is started at June 19 but there is a little bit overlap with June 18.

After removing my CSS code it looks better

I use this CSS snippet

.e-schedule .e-timeline-year-view .e-date-header-wrap table col, .e-schedule .e-timeline-year-view .e-content-wrap table col {

  width: 30px !important;

}

Does someone knows how the fix this?

[Hareesh Balasubramanian]

Hi Gertjan, 

Greetings from Syncfusion Support..! 

We have validated your shared snippets at our end and by default, scheduler will maintain a minimum width for work cells for the Year view based on the system’s resolution and in your shared snippets you have override the CSS with the “!important” property, which could be the reason for your reported problem “misalignment of the scheduler event”. 

And for the same, we have prepared a sample in which the events are properly aligned, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-year-view-sample?file=app.component.ts 

.e-schedule .e-timeline-year-view .e-date-header-wrap table col, 

.e-schedule .e-timeline-year-view .e-content-wrap table col { 

  width: 35px; 

} 

Kindly try the above solution and get back to us if you need any further assistance. 

  

Regards,  

Hareesh