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