Articles in this section
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(() {
 
    });
  });
}

View sample in GitHub

Change Month Header Format in Flutter Calendar

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied