--- title: "What’s New in 2020 Volume 3: Flutter Event Calendar" published_at: "2020-10-14T11:00:45+00:00" modified_at: "2024-11-20T08:59:14+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-2020-volume-3-flutter-event-calendar" excerpt: "Our last release included some impressive features in the Calendar widget, such as a schedule view and special time region. Now, Syncfusion is pleased to announce the availability of several important enhancements in the Flutter event calendar in our Essential..." taxonomy_category: - "Flutter" - "Mobile" - "Syncfusion" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Event Calendar" - "Flutter" - "iOS" - "Mobile" - "Web" - "What's New" --- # What’s New in 2020 Volume 3: Flutter Event Calendar [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![What’s New in 2020 Volume 3: Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/What%E2%80%99s-New-in-2020-Volume-3-Flutter-Event-Calendar.png) Our last release included some impressive features in the Calendar widget, such as a [schedule view](https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx) and [special time region](https://www.syncfusion.com/blogs/post/introducing-a-special-time-region-in-the-flutter-event-calendar.aspx) . Now, Syncfusion is pleased to announce the availability of several important enhancements in the [Flutter event calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) in our [Essential Studio® 2020 Volume 3 release](https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download) . Here are the new features included: - [Timeline month view](#timeline-month-view) - [Blackout dates](#blackout-dates) - [Hide leading and trailing dates](#hide-leading-and-trailing-dates) - [Custom agenda appointment time format](#custom-agenda-appointment-time-format) - [Quick view navigation](#quick-view-navigation) - [Custom builder](#custom-builder-support) ## Timeline month view This feature in the Flutter event calendar is used to display appointments across multiple days of a month on a horizontal axis where each column represents a single day. Refer to the following code. ``` return SfCalendar ( view: CalendarView.timelineMonth, ); ``` ![Timeline month view](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Timeline-month-view.png) Timeline month view ## Blackout dates This feature in the Flutter event calendar is used to disable any date in a month or timeline month view of a calendar to make it inactive. It restricts the user interaction on these dates. You can customize the style of the blackout dates using the **blackoutDatesTextStyle** property available in the Calendar. Here, the dates 10, 15, 20, 22, and 24 of August 2020 are marked as blackout dates to restrict user interactions in them. Refer to the following code. ``` return SfCalendar( view: CalendarView.month, blackoutDates: [ DateTime(2020, 08, 10), DateTime(2020, 08, 15), DateTime(2020, 08, 20), DateTime(2020, 08, 22), DateTime(2020, 08, 24) ], blackoutDatesTextStyle: TextStyle( fontWeight: FontWeight.w400, fontSize: 13, color: Colors.red, decoration: TextDecoration.lineThrough) ); ``` ![Blackout dates](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Blackout-dates.png) Blackout dates ## Hide leading and trailing dates This feature in the Calendar widget allows you to hide the previous and next months’ dates in the month view to enhance its appearance and display of the current month’s dates in the month view. Refer to the following code. ``` return SfCalendar( view: CalendarView.month, monthViewSettings: MonthViewSettings( showTrailingAndLeadingDates: false, )); ``` ![Hide leading and trailing dates](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Hide-leading-and-trailing-dates.png) Hide leading and trailing dates ## Custom agenda appointment time format You can customize the display format of time in each appointment in the month agenda view and schedule view of the Flutter Calendar widget. This can be done by specifying values to the **appointmentTimeTextFormat** property of the Calendar. Refer to the following code. ``` return SfCalendar( view: CalendarView.month, dataSource: _calendarDataSource, appointmentTimeTextFormat: 'HH:mm', monthViewSettings: MonthViewSettings( showAgenda: true ), ); ``` ![Custom agenda appointment time format](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Custom-agenda-appointment-time-format.png) Custom agenda appointment time format ## Quick view navigation Navigate among calendar views easily. With the header-date picker, quick navigation is provided in the month view when clicking on a month cell. Also, buttons for easy navigation for day, week, workweek and month views are available in the view headers. Refer to the following code. ``` return SfCalendar( view: CalendarView.month, allowViewNavigation: true, showDatePickerButton: true, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, ] ); ``` ![Quick view navigation](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Quick-view-navigation.png) Quick view navigation ## Custom builder support This feature allows you to design and create your own custom view for the month cells and month header for the schedule view in the Flutter event calendar. ### Month cell builder You can design your own custom view for a month cell by customizing the **monthCellBuilder** property of the Calendar. Refer to the following code. ``` return SfCalendar( view: CalendarView.month, monthCellBuilder: (BuildContext buildContext, MonthCellDetails details) { final Color backgroundColor = _getMonthCellBackgroundColor(details.date); final Color defaultColor = model.themeData != null && model.themeData.brightness == Brightness.dark ? Colors.black54 : Colors.white; return Container( decoration: BoxDecoration( color: backgroundColor, border: Border.all(color: defaultColor, width: 0.5)), child: Center( child: Text( details.date.day.toString(), style: TextStyle(color: _getCellTextColor(backgroundColor)), ), ), ); }, showDatePickerButton: true, monthViewSettings: MonthViewSettings( showTrailingAndLeadingDates: false, )); ``` ![Custom view for the month cell builder](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Custom-view-for-the-month-cell-builder.png) Custom view for the month cell builder ### Schedule view month header builder You can design your own custom view for the month header in the schedule view by customizing the **scheduleViewMonthHeaderBuilder** property in the Calendar. Refer to the following code. ``` return SfCalendar( view: CalendarView.schedule, dataSource: _calendarDataSource, scheduleViewMonthHeaderBuilder: (BuildContext buildContext, ScheduleViewMonthHeaderDetails details) { final String monthName = _getMonthDate(details.date.month); return Stack( children: [ Image( image: ExactAssetImage('images/' + monthName + '.png'), fit: BoxFit.cover, width: details.bounds.width, height: details.bounds.height), Positioned( left: 55, right: 0, top: 20, bottom: 0, child: Text( monthName + ' ' + details.date.year.toString(), style: TextStyle(fontSize: 18), ), ) ], ); }, showDatePickerButton: true); ``` ![Schedule view month header builder](https://www.syncfusion.com/blogs/wp-content/uploads/2020/10/Schedule-view-month-header-builder.png) Schedule view month header builder ## Conclusion In this blog post, we walked you through the new features in our Flutter [event calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) , available with our [2020 Volume 3 release](https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download) . You can explore other features in the [Calendar widget’s documentation](https://help.syncfusion.com/flutter/calendar/getting-started) , where you can find detailed explanations of each feature along with code examples. For existing customers, the newest version of Essential Studio® is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. Please feel free to try out the samples available in our [GitHub location](https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/calendar/shift_scheduler.dart) , and share your feedback or ask questions in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/home) . We are always happy to assist you!