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);
});
}
|
|
|
Didn't find an answer?
Contact Support
