Category / Section
How to change the month header format in the Flutter Calendar
4 mins read
In the Flutter Event Calendar, change the month header format by using the headerDateFormat property.
Using the onViewChanged callback, the different header format can be assigned based on the calendar views.
child: SfCalendar( view: CalendarView.day, controller: _controller, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], dataSource: _getCalendarDataSource(), headerDateFormat: _headerFormat, onViewChanged: viewChanged, ) void viewChanged(ViewChangedDetails viewChangedDetails) { if (_controller.view == CalendarView.day) { _headerFormat = 'yyy MMM'; } else if (_controller.view == CalendarView.week || _controller.view == CalendarView.workWeek || _controller.view == CalendarView.timelineDay || _controller.view == CalendarView.timelineMonth) { _headerFormat = 'MMM yyy'; } else if (_controller.view == CalendarView.month) { _headerFormat = 'MMMM yy'; } else if (_controller.view == CalendarView.timelineWeek || _controller.view == CalendarView.timelineWorkWeek) { _headerFormat = 'MMM yy'; } else { _headerFormat = 'yyy'; } SchedulerBinding.instance!.addPostFrameCallback((timeStamp) { setState(() { }); }); }