1. Home
  2. Forum
  3. Blazor
  4. Schedule with grouped timeline : Calculates width incorrectly

Schedule with grouped timeline : Calculates width incorrectly

Hi,

I would like to display a timeline for full-day events only. This timeline can be viewed in a weekly or monthly fashion.
I would like to see the full week or full month without having to scroll sideways.
I'm using colors for the events, so no text needs to be shown.

The example I'm sending below is not the full sample as I would want it to work, but is as close as possible to the documentation/demo's that you provide.
Ref: https://blazor.syncfusion.com/demos/scheduler/timeline-grouping?theme=bootstrap4
Ref: https://blazor.syncfusion.com/documentation/scheduler/cell-customization/#setting-cell-dimensions-in-timeline-views

The problems that I'm facing:
- On the initial render (week view), it only displays the first 6 days instead of 7, due to which I have to scroll sideways to see the last day. Once I change the view to Month view, and then back to week view, it shows all 7 days. Below a screenshot of the initial rendering.

- When there is a vertical scrollbar, which can be triggered by setting the variable "showMuchData" to true on line 23 in my sample code, the horizontal scrollbar always appears, even after switching between the week and month view. Below a screenshot of this event.

My code is included in a razor-file.



Best regards,

Michael Brignola

Attachment: Schedule_89c89275.7z

3 Replies 1 reply marked as answer
HB Hareesh Balasubramanian Syncfusion Team February 12, 2021 12:36 PM UTC

Hi Michael, 

Greetings from Syncfusion Support..! 

We have prepared a sample based on your shared code snippets at our end, which can be downloaded from the following link, 

Q1: On the initial render (week view), it only displays the first 6 days instead of 7, due to which I have to scroll sideways to see the last day. Once I change the view to Month view, and then back to week view, it shows all 7 days. Below a screenshot of the initial rendering. 
 
Q2: When there is a vertical scrollbar, which can be triggered by setting the variable "showMuchData" to true on line 23 in my sample code, the horizontal scrollbar always appears, even after switching between the week and month view. Below a screenshot of this event 
 
We have validated your both queries and we suspect that your requirement is to render the Scheduler without a horizontal scroller. We checked your shared code, where you used the incorrect CSS, which could be the cause for the reported problem. So we recommend that you use the CSS below in your sample to resolve the reported problem and for the same we shared the sample for your reference. 

<style> 
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
        width: 40px !important; 
    } 

    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col { 
        width: 20px !important; 
    } 
</style> 

Output Screenshot: 
 
 
Note: Your mentioned screenshots are not found in your shared attachment file. 

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

We will happy to assist you. 

Regards, 
Hareesh 


Marked as answer
MI Michael February 12, 2021 01:31 PM UTC

Hi Hareesh,

Thank you for your quick reply.
This indeed solved the first issue.
Please update the documentation site here, as this then shows the incorrect usage.

For the second point, this now shows correctly in the week view, but there still seems to be something strange in the month view.
I have updated the demo to include async calling of the data, as this is closer to my working copy.



PS: My apologies for the images that were not included in my previous post.


Best regards,

Mike


Attachment: SupportSample_53ecca23.7z

HB Hareesh Balasubramanian Syncfusion Team February 15, 2021 11:53 AM UTC

Hi Michael, 
  
Sorry for the inconvenience caused. 
  
We have validated your shared sample at our end and when we override the content wrap height by setting the important condition to it, then the layout will render properly without scroll bar but the events positioning will be affected in that scenario, and also there will be a misalignment between the header and content area of the Scheduler, in order to overcome from this problem kindly use below modified CSS and for the same, we have modified your shared sample, which can be downloaded from the following link. 
  
  
<style> 
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-date-header-wrap table col, 
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap table col { 
        width: 40px; 
    } 
  
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-date-header-wrap table col, 
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap table col { 
        width: 20px; 
    } 
    .schedule-cell-dimension.e-schedule .e-timeline-view .e-content-wrap, 
    .schedule-cell-dimension.e-schedule .e-timeline-month-view .e-content-wrap { 
        overflow-x: hidden; 
    } 
</style> 
  
Kindly try the above solution and get back to us if you need any further assistance. 
  
Regards, 
Hareesh 


Loader.
Up arrow icon