We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Flutter |
Control: SfCalendar |
Published Date: November 17, 2020 |
Last Revised Date: May 7, 2021

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

 

 

 

ADD COMMENT
You must log in to leave a comment
Comments
Maria Donosova
Oct 21, 2021

Thank you, this is very helpful! I used this approach to display days (timeline view) next to each other. Is there a way to hide or adjust the time? I have attached the picture for reference.screenshot

Reply
Maria Donosova
Oct 21, 2021

Link

Indumathi Ravichandran [Syncfusion]
Oct 22, 2021

Hi Maria,

Thank you for contacting Syncfusion support. Regarding Query: Is there a way to hide or adjust the time?

Based on the shared image and information, we have checked and your requirement is “Hide the time of the timeline views with multiple calendars”. You can customize the size of the time ruler size by using the timeRulerSize property, by setting this property values as 0 you can hide the time in the timeline views. Further based on the given reference UI, we suggest to use resource view. Kindly find the UG links for the time ruler size and resource view.

UG links:

https://help.syncfusion.com/flutter/calendar/timeslot-views#change-time-ruler-size https://help.syncfusion.com/flutter/calendar/resource-view

Also, you can adjust the time by using timeFormat and timeInterval property of the TimeSlotViewSettings. Please find the UG links for the same.

UG links:

https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-formatting https://help.syncfusion.com/flutter/calendar/timeslot-views#change-time-interval

You can customize the appearance of the time, by using timeTextStyle property. Please find the UG links for the same.

https://help.syncfusion.com/flutter/calendar/timeslot-views#time-text-appearance

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R

Reply
Maria Donosova
Oct 22, 2021

Thank you, it helped a lot!

Indumathi Ravichandran [Syncfusion]
Oct 25, 2021

Hi Maria,

Thank you for the update. Please get in touch with us if would you require any further assistance.

Regards, Indumathi R

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile