1. Home
  2. Forum
  3. Flutter
  4. Show multiple calendars with single scrollbar

Show multiple calendars with single scrollbar

Hello.


In my application, I'm using the SFCalendar to show multiple users appointments side by side with a shared controller so they all see the same dates.

At the moment each calendar scrolls up and down independently.

I would like to only show one scrollbar to the right of the calendars and have them scroll in sync.

Is there any way I can disable the scrolling behaviour of the calendar, so I can wrap the column in which I'm showing the multiple calendars in a SingleChildScrollView an have them scroll in sync?


You're doing a great job with these products. Thank you.


Kind regards,

Cris



9 Replies
IR Indumathi Ravichandran Syncfusion Team February 4, 2022 05:41 AM UTC

Hi Cristinel, 
 
Based on the shared information, we have checked and we suspect your requirement is “Showing multiple calendars in a Single scroll view”. By using the navigationDirection property of the calendar you can navigate the calendar vertically and horizontally. We have KB documentation for showing multiple calendars in a single screen and we have placed the calendars in the Column widget, using the onViewChanged callback of the first calendar we have updated the display date of the second calendar and vice versa. Please find the KB documentation from the following link. 
 
KB link: 
 
We hope that this helps you. If this not your requirement, can you please share more details about your requirement clearly. It would be helpful for us to analyze and provide you a solution at the earliest. 
 
Regards, 
Indumathi R 


CN Cristinel Negoianu February 4, 2022 05:55 AM UTC

Hi. Thank you for looking into this for me.

The KB you've pointed out is not what I'm looking for.

I'm looking to show the calendars side by side and get them to scroll in sync.

I'm attaching a screenshot that shows what I mean. As you can see there, the scrollbars are on different positions.





I appreciate your time,

Cris


Attachment: ScalendarsSideBySide_388c42f.zip

IR Indumathi Ravichandran Syncfusion Team February 7, 2022 11:20 AM UTC

Hi Cristinel, 
 
As per the current implementation of the calendar doesn’t have support to scrolling synchronously with multiple calendars. Please let us know if you have any concern on this. We will be glad to assist you. 
 
Regards, 
Indumathi R 


CN Cristinel Negoianu February 7, 2022 11:26 AM UTC

All you need to do is surface the scroll physics on the SingleChildScrollView, so I can set it to no scroll.

I just need a way to make the calendar not scroll so I can wrap the calendar in a SingleChildScrollView myself.

Can you put that as a request?


Kind regards,

Cris


IR Indumathi Ravichandran Syncfusion Team February 8, 2022 01:02 PM UTC

Hi Cristinel,

We have prepared the simple sample for scrolling synchronously with multiple calendars using SingleChildScrollView widget. Please find the sample from the following link.

Also please find the UG documentation for timeIntervalHeight. By using the timeIntervalHeight value as -1, it autofit the height to screen height. Please refer the UG links for the same.

UG links:

Also, please find the UG documentation for headerHeight, viewHeaderHeight customization. By setting both height value as 0 you can hide the default headers.

UG links:

We hope that this helps you. Please let us know if you need further assistance.

Regards,
Indumathi R



CN Cristinel Negoianu February 8, 2022 01:12 PM UTC

Thanks for looking at a solution for me.


Kind regards,

Cris


IR Indumathi Ravichandran Syncfusion Team February 9, 2022 05:57 AM UTC

Hi Cristinel, 
 
Thank you for the update. Please get in touch with us if you require any further assistance. We will be happy to assist you.  
 
Regards, 
Indumathi R 


MI Micky December 28, 2022 04:49 AM UTC

Sorry for my insert question.

We have prepared the simple sample for scrolling synchronously with multiple calendars using SingleChildScrollView widget. Please find the sample from the following link.

- If I use view: CalendarView.schedule, I can't scroll vertical due to effert from scroll behavior from schedule mode

- If I want I set the height of SfCalendar (view is schedule mode), I can continue scroll once scroll-view-in-schedule is end ?


Thanks,

Micky


MS Muniappan Subramanian Syncfusion Team December 29, 2022 01:12 PM UTC

Micky,


As per the current implementation of the Flutter Calendar doesn’t have support for scrolling the “ScheduleView” synchronously with multiple calendars and it is an expected behavior of the calendar. Please let us know if you have any concerns about this. We will be glad to assist you.


Loader.
Up arrow icon