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  to leave a comment
Access denied
Access denied