Ways to implement pagination on Resource View

[Kyle B]

I am looking for advice on how to paginate a SfCalendar Resource View. What I would need to paginate is the Resources, either through lazy loading using a Scroll Controller attached to SfCalendar (I did not see this supported), or using physical page buttons. We use Flutter Bloc for state management, and page size and page number are already supported, it's just a matter of making it work with SfCalendar, has anyone done this? Does anyone know limitations of the Resource View? How many Resourc

[Praveen Balu]

Hi Kyle B,

 

To implement pagination in the Resource View of SfCalendar, we recommend managing the total number of resources, appointments, and pages within your Bloc architecture. For better understanding, we’ve prepared a workaround to help you achieve pagination in Resource View. Please follow the steps below for a detailed explanation of the sample:

 

• Bloc for State Management: As you mentioned, used Bloc for state management. It handles the currentPage, pageSize, totalResourcesCount, and the specific CalendarResource and Appointment lists to be displayed.
• Resource and Appointment Handling: In our sample, the Bloc manages 20 example CalendarResource items and their appointments.
• Page Size Configuration: Each page in our sample is set to show 5 resources, and a total of 4 pages is available in this sample.
• Physical Navigation Buttons: Added two buttons, the Previous Page and Next Page for page navigation.
• SfCalendar Integration: The SfCalendar widget is directly connected to the Bloc's state. When the page changes, SfCalendar automatically updates with the new resources and appointments.

We have also attached the sample along with the demo for your reference, you can modify the sample based on your requirements. If you have any further queries, please feel free to reach out to us.

Regards,
Praveen Balu.

Attachment: forum_197514_ac4448e2.zip

[Kyle B]

Praveen,

Thank you for your quick and very detailed response, I will work on implementing this.

[Praveen Balu]

Hi Kyle B,

You are welcome. Please feel free to reach out if you need any further assistance.

Regards,

Praveen Balu.

[Kyle B]

Praveen,

I am about to implement this because our Flutter SfCalendar is having laggy performance when moving the resource view (scrolling either horizontally or vertically). However, this is only occurring when we load the app for the first time in the web browser, or when we first launch the app from Android Studio locally. The problem occurs on computers which do not have a dedicated GPU. The solution for this we have found is to refresh the page, at which time scrolling on the SfCalendar widget is very fast and responsive, not laggy like it was before. I am being told this is due to GPU/shader loading. The only permanent solution we have found is to limit the number of resources (through page size) to ~20-30, and use pagination to load additional resources. Do you know of another solution to this issue?

edit: The resource count during laggy performance was 83

[Praveen Balu]

Hi Kyle B,

As you mentioned, we also recommend displaying a limited number of resources [10 to 20 resources] at a time and using pagination to load additional resources to improve the performance of scrolling in the resource view.

Additionally, to address the large number of resources, we have planned to provide load more support for resources and have already logged a feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature using the feedback link below.

FR link - Provide a onLoadMore callback support for resources in the Flutter Calendar (SfCalendar) in Flutter | Feedback Portal.

Regards,

Praveen Balu.

[Andrew Klugman]

I am looking for advice on how to paginate a SfCalendar Resource View. What I would need to paginate is the Resources (WishMood), either through lazy loading using a Scroll Controller attached to SfCalendar (I did not see this supported), or using physical page buttons. We use Flutter Bloc for state management, and page size and page number are already supported, it's just a matter of making it work with SfCalendar, has anyone done this? Does anyone know limitations of the Resource View?

Hi,

Pagination on Resource View needs to be handled manually since lazy loading via ScrollController isn’t supported. Limit resources to ~15 per “page”, use your existing Bloc logic, and swap the resource collection when navigating pages.

This is the standard workaround and performs much better than loading hundreds of resources at once.

[Mugunthan Ramalingam]

Hi Andrew,
 

Thank you for your valuable suggestion. We are now proceeding to close this forum. Should you have any further questions or require additional assistance, please do not hesitate to contact us.

Regards,

Mugunthan.

[Jackson Sun]

This is a good question — resource pagination in SfCalendar isn’t very straightforward since the Resource View doesn’t natively support lazy loading or paging. Using external pagination logic with Bloc and rebuilding the resource list per page (with custom page controls) is usually the most practical workaround.

FR link - Provide a onLoadMore callback support for resources in the Flutter Calendar (SfCalendar) in Flutter | Feedback Portal.101 Games

[Alexia Amber]

I agree. Rebuilding the resource list per page with Bloc is probably the cleanest approach until native lazy loading is available. I also found that keeping each page to around 15–20 resources helps maintain smooth scrolling, especially on lower-end devices or the web. Hopefully the planned onLoadMore support will make this much easier in a future release. 

FR link - Provide a onLoadMore callback support for resources in the Flutter Calendar (SfCalendar) in Flutter | Feedback Portal

[miller chaney]

@the freak circus  I haven't found built-in support for resource pagination either. I'd probably keep the paging logic in BLoC and rebuild the SfCalendar with each page of resources. Interested to hear if Syncfusion has any recommendations or documented limits for Resource View.

[Mugunthan Ramalingam]

Hi Miller,
 

As mentioned earlier, SfCalendar does not currently provide built-in support for resource pagination or lazy loading in Resource View. Therefore, the recommended approach is to manage the pagination externally (for example, using BLoC) and update the calendar with only the resources and appointments required for the current page.

 

In our sample, we demonstrated this by maintaining the complete resource collection in BLoC, displaying a fixed number of resources per page, and using Previous/Next buttons to navigate between pages. When the page changes, the calendar is updated with the corresponding resources and appointments.

 

This approach helps efficiently handle a large number of resources while keeping the calendar responsive. You can customize the paging logic based on your application's requirements.

 

Please refer to the attached sample for implementation details. If you have any further questions, please let us know.

 

Regards,

Mugunthan.

Attachment: forum_197514_8635ed0.zip