[syncfusion_flutter_datepicker] Add support for separate month headers and individual navigation buttons in multi-view mode

[iamnijat]

Use case

✅ Use Case

We’re building a date range selection feature with two side-by-side calendars. Our design requires:

Displaying a separate month header above each calendar.

Enabling independent navigation arrows per calendar view.

This allows a clearer and more flexible user experience, especially for users working with date ranges across multiple months.

🔍 Why this matters

Improved UX: Users can easily understand and control each calendar view independently.

Industry standard: This behavior is supported in many modern UI frameworks and calendar libraries.

Design alignment: Matches our Figma layout, which separates month labels and navigation per calendar.

Proposal

Feature Request
❓ What is the feature?
Enhance multi-view mode to support:

Separate month headers: Show each calendar’s month/year (e.g., “May 2025” and “June 2025”) directly above the respective calendar.

Individual navigation buttons: Allow users to navigate each calendar view independently (e.g., go to April on the left calendar while keeping June on the right).

[Mugunthan-Ramalingam]

Hi @iamnijat,

To display a side-by-side calendar UI in the SfDateRangePicker, use the enableMultiView property. This allows two calendar views to be shown simultaneously. However, please note that the navigation arrows and header text UI will be shared across both calendar views by default.

If you need to customize the header UI such as displaying separate navigation arrows and separate header text for each calendar, you’ll need to override the default header. The SfDateRangePicker does not have a built-in property to customize the header directly. To achieve this, you can use a custom widget to replace the default header and create the layout and functionality you need. We’ve shared a Knowledge Base article for your reference.

KB link: https://support.syncfusion.com/kb/article/10373/how-to-customize-the-header-in-the-flutter-multi-date-range-picker-sfdaterangepicker
KB link: https://support.syncfusion.com/kb/article/9846/how-to-customize-the-header-view-of-the-flutter-date-range-picker

Please refer to the shared documentation, which provides step-by-step guidance on how to render a custom widget as the header UI.

If you have any further queries, please get back to us. We are always happy to assist you.

Regards,
Mugunthan.

[iamnijat]

Hi, thanks for your comment, but what I want to achieve is customizing the header in both views (multi view)

I am pasting the component from Figma.

[Mugunthan-Ramalingam]

Hi @iamnijat,

We have created a custom sample that replicates the shared vertical calendar UI using two SfDateRangePicker widgets. To achieve this, we utilized separate controller instances for each picker to control their display dates and handle navigation between months. The UI is designed to show two consecutive months stacked vertically, with custom headers for navigation. Selection details are synchronized using the controllers, ensuring a smooth user experience.

We have shared a sample for your reference, and you can customize it further based on your requirements. Please let us know if you need any further assistance.

Demo:

sample: gh_2364.zip

Regards,
Mugunthan.