[syncfusion_flutter_datepicker]: Add opportunity to make header as not sticky and customize header month and year text format

[ziqq]

[Mugunthan-Ramalingam]

Hi Ziqq,

The Flutter SfDateRangePicker provides a monthFormat property to customize the month text in the built-in header (like "MMM" or "MMMM"), but it doesn't allow you to change the overall header layout or reorder how the year and month are displayed. So formats like "Month Year" instead of "Year Month" cannot be done with the default header.

However, to achieve your requirement for a scrollable header that moves with each month instead of staying at the top, we created a workaround. We have hidden the built-in header and added custom headers for each month. We then used a ListView with multiple date pickers (one for each month) so that each custom header scrolls smoothly with its month view. We also set the navigation mode to "none" to prevent any internal navigation conflicts. This way, the "Month Year" header you wanted scrolls naturally with the calendar instead of being sticky.

Since these are custom headers and not part of the SfDateRangePicker component, they won't automatically change when your app's language changes. If you need to support different languages, you'll need to update the _formatHeader() method manually to use localized month names using DateFormat('MMMM', locale).format(date).

We have shared the KB documentation for your reference.
KB link: How to customize the header in the Flutter multi date range picker (SfDateRangePicker)?

We have shared a sample for your reference, which you can further customize based on your specific requirements.

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

gh_2532.zip

Regards,
Mugunthan.

[ziqq]

@Mugunthan-Ramalingam Hi, thanks for the clarification and the sample.

monthFormat: 'MMMM' solves only part of the issue, but I still have two concerns:

1. How can I capitalize the month name in the built-in header?
   For example, in some locales DateFormat('MMMM') returns a lowercase month name, but the picker header should display it capitalized.

2. The workaround with custom headers and List.generate(12, ...) does not look suitable for a production picker.
   It creates multiple SfDateRangePicker instances eagerly, so the list is limited to a fixed number of months and is not lazy. If I need to support a longer or practically unbounded scroll range, this approach becomes expensive and hard to synchronize.

Also, with multiple picker instances, selection state, min/max dates, blackout dates, range selection, and custom cell rendering would all need to be manually synchronized across separate widgets. That makes the workaround quite fragile.

So my question is: is there any supported way to customize the built-in month header text itself, for example by providing a formatter/callback for the header label, while keeping a single SfDateRangePicker instance with vertical scroll navigation?

If this is currently not supported, could you please consider it as a feature request?

[Mugunthan-Ramalingam]

Hi Ziqq,

1. Capitalizing the Month Name in Header

We have validated your requirement regarding capitalization of the month name. In this case, the lowercase month text comes from the intl package locale source, and currently the built-in header uses this value directly.

So, we have considered this as an improvement and have created a feature request. You can track the progress using the link below,

FR link: Improve capitalization of month names in header of SfDateRangePicker in Flutter | Feedback Portal

2. Workaround and Sample Clarification

The earlier sample with multiple pickers was provided to remove the sticky header and simulate a scrollable header experience. At the time, the focus was primarily on achieving the desired visual behavior, without accounting for scenarios involving large date ranges or potential performance considerations.

Based on your requirement, we have now prepared an alternative sample using a single SfDateRangePicker instance with a custom header updated via onViewChanged. This approach improves performance by maintaining a single control. However, the header remains fixed at the top and cannot be displayed separately for each month during scrolling.

If this approach does not meet your requirements, please let us know. We can evaluate raising a feature request to support a scrollable header and share further details accordingly.

Note: The built-in header is intentionally designed to be sticky. This ensures clear identification of the currently visible month, maintains consistent navigation, and enhances overall usability.

Please feel free to reach out if you need further assistance.

Sample: gh_2532.zip

Regards,
Mugunthan.

[ziqq]

Hi @Mugunthan-Ramalingam,

This example isn't what I need; I need a standard header (floating under each month), but with the ability to customize the formatter. Your example does something different, and it also overuses the setState() method, which rebuilds the entire screen on every view change.

[Mugunthan-Ramalingam]

Hi Ziqq,

As mentioned earlier, we do not currently have support for a non-sticky header in the SfDateRangePicker. However, we have taken your requirement into consideration as a new feature and have logged a feature request for it in our feedback portal. We will prioritize features for each release based on demand and overall priority, so this feature may be included in one of our upcoming releases. You can track the status of this feature using the link below:

FR Link: Support for Non-Sticky (Scrollable) Header in SfDateRangePicker in Flutter | Feedback Portal

Please let us know if you need any further assistance.

Regards,
Mugunthan.