ignoreWhitespace for TimelineYear

[Max Melcher]

Hi team, 

is there a way to reduce the whitespace for TimelineYear? 

ignoreWhitespace works great for all other timelines, except for yearly view.

Repo:

https://stackblitz.com/edit/angular-atwkdkwc?file=src%2Fapp.component.ts

[Vijayakumar Rajasekar]

Hi Max Melcher,

 

Thank you for reaching out to Syncfusion support.

 

We validated your query about the ignoreWhitespace property not being applied to the yearly view. However, in the year view, the cells are rendered with a default minimum height, so when you add a single appointment, it seems it doesn't reflect the ignoreWhitespace functionalities. When the appointment count reaches the height of the cell, the white space gets ignored as per the ignoreWhitespace property behavior, as shown below.

 

[ignoreWhitespace = true]

[ignoreWhitespace = false]

Kindly reach out if you have any questions or clarifications.

Regards,

Vijayakumar R

[Max Melcher]

Hi Vijayakumar,

thanks for the confirmation. 

How can I remove the default minimum height? For the other views it behaves differently. 

Thanks,
Max

[Vijay Ravi]

Hi Max Melcher,
 

We have reviewed and validated the sample you shared. We noticed that you have enabled the ignoreWhitespace property in the eventSettings of the scheduler. When this property is enabled, events fully occupy the cells without any whitespace. This is the expected behavior of the ignoreWhitespace property. As a result, appointments are rendered to completely fill the cells in the Timeline Year view (and other views), which prevents setting a minimum height for those cells.

Additionally, you mentioned that there is a difference in behavior between the yearly view and other views. Could you please clarify the exact difference by sharing clear screenshots? It would also be very helpful if you could describe your specific use case and requirement in more detail so we can provide the most appropriate solution.

Timeline year view
 

.

TimeLineDay view

 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Max Melcher]

Hi Vijay, 

yes correct - but the whitespace is not needed when you have a lot of resources. Not all fit on the screen, but they could if the 'empty' ones would be smaller.

Month: Very compact,  ignoreWhitespace works as expected.

Year view:  ignoreWhitespace does not comact the 'empty' ones, and its different than the other views. Also the resource group row is very tall. Not consistent with the other views. 

Its the same amount of resources and it would be great if they would be visibile all at once.

Any chance to make it narrow? 

Thanks,

Max

[Max Melcher]

Hi Vijay, 

yes correct - but the whitespace is not needed when you have a lot of resources. Not all fit on the screen, but they could if the 'empty' ones would be smaller.

Month: Very compact,  ignoreWhitespace works as expected.

Year view:  ignoreWhitespace does not comact the 'empty' ones, and its different than the other views. Also the resource group row is very tall. Not consistent with the other views. 

Its the same amount of resources and it would be great if they would be visibile all at once.

Any chance to make it narrow? 

Thanks,

Max

[Vijayakumar Rajasekar]

Hi Max Melcher,

 

Thank you for sharing details that demonstrate the issue. To modify the default minimum height for the timeline year view, you need to override the CSS as shown below,

.e-schedule .e-horizontal.e-timeline-year-view .e-month-header,

.e-schedule .e-horizontal.e-timeline-year-view .e-work-cells {

  height: 30px;

}

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

.e-schedule .e-timeline-year-view.e-vertical .e-work-cells {

  height: 30px;

}

 

Default heights for work cells, month header cells, and resource cells are modified to 30px based on a single appointment height. When an appointment is added, the height recalculates based on the appointment count.

 

Please find the modified sample link below

Sample: https://stackblitz.com/edit/angular-atwkdkwc-mh1jsxhr?file=src%2Fapp.component.css

 

Kindly get back us if you need any further assistance

Regards,

Vijayakumar R