Articles in this section
Category / Section

How to update blackout dates using onViewChanged callback in the Flutter Calendar

1 min read

In the Flutter Event Calendar, you can update the blackoutDates by using onViewChanged callback of the calendar.

Inside the state initialize the default values for calendar.

List<DateTime>? _blackoutDates = <DateTime>[];

Using the onViewChanged callback get the first 5 visible dates of the month and add dates to _blackoutDateCollection variable and assign the collection to the _blackoutDates variable.

void viewChanged(ViewChangedDetails viewChangedDetails) {
  List<DateTime> _blackoutDateCollection = <DateTime>[];
 
  _blackoutDateCollection.add(viewChangedDetails.visibleDates[0]);
  _blackoutDateCollection.add(viewChangedDetails.visibleDates[1]);
  _blackoutDateCollection.add(viewChangedDetails.visibleDates[2]);
  _blackoutDateCollection.add(viewChangedDetails.visibleDates[3]);
  _blackoutDateCollection.add(viewChangedDetails.visibleDates[4]);
  SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
    setState(() {
      _blackoutDates = _blackoutDateCollection;
    });
  });
}

Assign _blackoutDates to blackoutdates property of the calendar.

child: SfCalendar(
  view: CalendarView.month,
  dataSource: _getCalendarDataSource(),
  allowedViews: [
    CalendarView.month,
    CalendarView.timelineMonth,
  ],
  blackoutDates: _blackoutDates,
  onViewChanged: viewChanged,
  blackoutDatesTextStyle: TextStyle(
      color: Colors.red, decoration: TextDecoration.lineThrough),
),

View sample in GitHub

Calendar Blackout Dates

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied