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>[];
  SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
    setState(() {
      _blackoutDates = _blackoutDateCollection;

Assign _blackoutDates to blackoutdates property of the calendar.

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

View sample in GitHub

Calendar Blackout Dates


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