What’s New in 2020 Volume 3: Flutter Event Calendar

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 Studio® 2020 Volume 3 release. Here are the new features included:

• Timeline month view
• Blackout dates
• Hide leading and trailing dates
• Custom agenda appointment time format
• Quick view navigation
• Custom builder

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

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

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

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

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>
    [
       CalendarView.day,
       CalendarView.week,
       CalendarView.workWeek,
       CalendarView.month, 
     ]
  );

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

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

Conclusion

In this blog post, we walked you through the new features in our Flutter event calendar, available with our 2020 Volume 3 release. You can explore other features in the Calendar widget’s documentation, 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

Please feel free to try out the samples available in our GitHub location, and share your feedback or ask questions in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. We are always happy to assist you!