[syncfusion_flutter_calendar][web] Header Displays Wrong for Resource View

[ThorinEk]

Bug description

I am having problems with the calendar header of Syncfusion Calendar not displaying correctly.

Two (possibly related) issues:

1. The SfCalendar.headerDateFormat parameter is not respected
2. The week number is cut off even though there is plenty of room available to it

• The SfCalendar.headerDateFormat property is respected in "week view" but not when using resource view. I set it to MMM yyyy which should show Jan 2025 however it shows January 2025 when using resource view.

See attached screenshot for demonstration

Thanks in advance for any assistance!

Steps to reproduce

1. Use Resource View
2. Use SfCalendar with the parameters in the sample code below

Code sample

Code sample

SfCalendar(
  showNavigationArrow: true,
  showWeekNumber: true,
  weekNumberStyle: WeekNumberStyle(
    backgroundColor: Theme.of(context).colorScheme.surfaceBright,
    textStyle: TextStyle(
      color: Theme.of(context).colorScheme.tertiary,
      fontSize: 10,
    ),
  ),
  showDatePickerButton: true,
  appointmentTimeTextFormat: 'HH:mm',
  headerDateFormat: 'MMM yyyy',
  showTodayButton: widget.showTodayButton,
)

Screenshots or Video

Screenshots / Video demonstration

Stack Traces

None

On which target platforms have you observed this bug?

Web

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.27.2, on Microsoft Windows [Version 10.0.26100.2894], locale sv-SE)
    • Flutter version 3.27.2 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68415ad1d9 (9 days ago), 2025-01-13 10:22:03 -0800
    • Engine revision e672b006cb
    • Dart version 3.6.1
    • DevTools version 2.40.2

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\pegu\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.2)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.9.34622.214
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)

[√] VS Code (version 1.92.1)
    • VS Code at C:\Users\pegu\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.102.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.26100.2894]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 131.0.6778.265
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 132.0.2957.115

[√] Network resources
    • All expected network resources are available.

[Hariram-SF4428]

Hi @ThorinEk,

We can replicate the reported issue regarding the headerDateFormat parameter displaying wrong date format in resource view and the week number being cut off despite sufficient space at our end. We have logged a bug report for it in our feedback portal. We will fix and include the changes in our weekly release, which is expected to be rolled out on Apr 22nd, 2025.

We will update you here once the release is rolled out and appreciate your patience until then. You can also track the status of the bug with the feedback link below.

FR Link - https://www.syncfusion.com/feedback/66695/sfcalendar-headerdateformat-is-incorrect-in-the-resource-view-and-the-week-number

Regards,
Hariram S

[ThorinEk]

Hello @Hariram-SF4428
Thanks for letting me know. Will make sure to check the new update when it is rolled out.
Note that I am not able to view the bug status through the link you provided:

When I press "Sign in" in the top right, I get this error:

This is not that important for me, it is enough for me to just try the new update with the fix once it arrived, but just wanted to let you know about this problem with viewing the bug/ticket.

[Mugunthan-Ramalingam]

Hi @ThorinEk,

We would like to let you know that the reported issue is fixed and rolled out in our weekly patch release on April 22, 2025. So, we kindly request you to upgrade the SfCalendar package to the latest version below.

SfCalendar version: https://pub.dev/packages/syncfusion_flutter_calendar/versions/29.1.39

Root Cause: The date format is not applied in the Timeline Day view because the header text date format is not returned specifically for this view. Additionally, the week number text overflows due to limited space and is displayed with an ellipsis.

Regards,
Mugunthan.

[ThorinEk]

Hello @Mugunthan-Ramalingam
Thanks a lot of notifying me about the fix being included in this version. I have now upgraded to 29.1.39 and can confirm the week number is now displayed correctly. I Will double check the date format is correct as well but I presume it is fixed as well.

Thanks again!