How to localize the custom headers text in the Flutter Calendar (SfCalendar)

1 min read

In the Flutter Calendar, you can localize the custom header by using DateFormat.

Please refer to this KB article for adding custom headers in the Flutter Calendar.

KB link: https://www.syncfusion.com/kb/10997/how-to-add-custom-header-and-view-header-in-the-flutter-calendar

STEP 1: Initialize the default values for calendar.

final CalendarController _controller=CalendarController();
String? _headerText='';
String? date;
double? _width=0.0, cellWidth=0.0;
String _string='';

STEP 2: Using the onViewChanged callback, update the header with specified locale.

child: SfCalendar(
    headerHeight: 0,
    controller: _controller,
    view: CalendarView.month,
    onViewChanged: (ViewChangedDetails viewChangedDetails) {
      _headerText = DateFormat('MMMM yyyy', 'fr')
          .format(viewChangedDetails
          .visibleDates[viewChangedDetails.visibleDates
          .length ~/ 2])
          .toString();
      _string = _headerText![0].toUpperCase() +
          _headerText!.substring(1);
      SchedulerBinding.instance!.addPostFrameCallback((
          duration) {
        setState(() {});
      });
    }
))

View the GitHub sample here

Flutter Calendar custom header localization

Did you find this information helpful?

Yes

Comments (0)

How to localize the custom headers text in the Flutter Calendar (SfCalendar)

Access denied