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);
});
}
|
|
|
