Articles in this section
Category / Section

How to display two month view Calendar in a screen using Flutter Calendar

1 min read

In the Flutter Event Calendar, you can display the two calendars in a single screen using onViewChanged callback of the calendar.

STEP 1: Inside the state initialize the calendar controllers.

CalendarController _calendarController1 = CalendarController();
CalendarController _calendarController2= CalendarController();

 

STEP 2: Place the two calendars inside the Column widget.

child: Column(
  children: [
    SfCalendar(
      view: CalendarView.month,
      controller: _calendarController1,
      dataSource: _getDataSource(),
      monthViewSettings: MonthViewSettings(
        navigationDirection: MonthNavigationDirection.vertical,
      ),
      onViewChanged: calendar1ViewChanged,
    ),
    SfCalendar(
      view: CalendarView.month,
      controller: _calendarController2,
      viewHeaderHeight: 0,
      monthViewSettings: MonthViewSettings(
          navigationDirection: MonthNavigationDirection.vertical),
      dataSource: _getDataSource(),
      onViewChanged: calendar2ViewChanged,
    ),
  ],
),

 

STEP 3: Set the display dates for the both calendar like the below code snippet.

void calendar1ViewChanged(ViewChangedDetails viewChangedDetails) {
  SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
    _calendarController2.displayDate = DateTime(
        _calendarController1.displayDate!.year,
        _calendarController1.displayDate!.month + 1,
        _calendarController1.displayDate!.day);
  });
}
 
void calendar2ViewChanged(ViewChangedDetails viewChangedDetails) {
  SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
    _calendarController1.displayDate = DateTime(
        _calendarController2.displayDate!.year,
        _calendarController2.displayDate!.month - 1,
        _calendarController2.displayDate!.day);
  });
}

View sample in GitHub

two calendars gif

 

 

 

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