Changing the column width and height in timeline views

[Alexander Claesson]

Hi, I am using angular scheduler with timeline view.
For now we support "timeline day" and "timeline week".

When we add an event the event is very small. You cant read the title. 
So I want to make the cell with and height larger, and also make the event larger.

Is that possible?

Attachment: timeline_screenshot_fa6fa59f.zip

[Swathi Ravi]

Hi Alexander Claesson,

 

Thank you for reaching out to us!

 

You can adjust the height and width of the Scheduler cells using the following CSS styles:

 

[app.component.css]

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

.e-schedule .e-timeline-view .e-content-wrap table col,

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

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

  width: 120px;

}

 

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

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

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

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

  height: 75px;

}

 

If you have smaller events and need to display the subject details more clearly, you can enable tooltips using the following eventSettings configuration:

 

  public eventSettings: EventSettingsModel = {

    dataSource: extend([], resourceData.concat(timelineResourceData), null, true) as Record<string, any>[],

    enableTooltip: true

  };

 

 

Sample: https://stackblitz.com/edit/angular-cernzczz-atc1fqcj?file=src%2Fapp.component.css,src%2Fapp.component.ts

 

UG and demo reference,

 

https://ej2.syncfusion.com/angular/demos/#/tailwind3/schedule/cell-dimension

https://ej2.syncfusion.com/angular/documentation/schedule/cell-customization#setting-cell-dimensions-in-all-views

https://ej2.syncfusion.com/angular/demos/#/tailwind3/schedule/tooltip

https://ej2.syncfusion.com/angular/documentation/schedule/appointments#display-tooltip-for-appointments

 

 

Please feel free to reach out if you need further assistance!

 

Regards,

Swathi