Articles in this section
Category / Section

How to customize the blackout dates in the Flutter Calendar

2 mins read

In the Flutter Event Calendar, you can customize the blackout dates using the blackoutDatesTextStyle property of the Flutter event calendar.

STEP 1: Assign values to the blackoutDates property of the calendar. Use the blackoutDatesTextStyle property for blackout dates customization.

child: SfCalendar(
  view: CalendarView.month,
  allowedViews: <CalendarView>[
    CalendarView.month,
    CalendarView.timelineMonth
  ],
  dataSource: _getDataSource(),
  blackoutDates: <DateTime>[
    DateTime.now().add(Duration(days: 1)),
    DateTime.now().add(Duration(days: 2))
  ],
  blackoutDatesTextStyle: TextStyle(
      fontWeight: FontWeight.w400,
      fontSize: 13,
      color: Colors.pinkAccent,
      decoration: TextDecoration.lineThrough),
),

STEP 2: Please find the entire code snippet for the same.

 

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
 
void main() => runApp(BlackoutDatesCustomization());
 
class BlackoutDatesCustomization extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: SafeArea(
          child: SfCalendar(
            view: CalendarView.month,
            allowedViews: <CalendarView>[
              CalendarView.month,
              CalendarView.timelineMonth
            ],
            dataSource: _getDataSource(),
            blackoutDates: <DateTime>[
              DateTime.now().add(Duration(days: 1)),
              DateTime.now().add(Duration(days: 2))
            ],
            blackoutDatesTextStyle: TextStyle(
                fontWeight: FontWeight.w400,
                fontSize: 13,
                color: Colors.pinkAccent,
                decoration: TextDecoration.lineThrough),
          ),
        )));
  }
 
  _DataSource _getDataSource() {
    final List<Appointment> appointments = <Appointment>[];
    appointments.add(Appointment(
      startTime: DateTime.now().add(Duration(hours: 4)),
      endTime: DateTime.now().add(Duration(hours: 5)),
      subject: 'Meeting',
      color: Colors.red,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(Duration(days: -2, hours: 4)),
      endTime: DateTime.now().add(Duration(days: -2, hours: 5)),
      subject: 'Development Meeting   New York, U.S.A',
      color: Color(0xFFf527318),
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(Duration(days: -2, hours: 3)),
      endTime: DateTime.now().add(Duration(days: -2, hours: 4)),
      subject: 'Project Plan Meeting   Kuala Lumpur, Malaysia',
      color: Color(0xFFfb21f66),
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(Duration(days: -2, hours: 2)),
      endTime: DateTime.now().add(Duration(days: -2, hours: 3)),
      subject: 'Support - Web Meeting   Dubai, UAE',
      color: Color(0xFFf3282b8),
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(Duration(days: -2, hours: 1)),
      endTime: DateTime.now().add(Duration(days: -2, hours: 2)),
      subject: 'Project Release Meeting   Istanbul, Turkey',
      color: Color(0xFFf2a7886),
    ));
    appointments.add(Appointment(
        startTime: DateTime.now().add(const Duration(hours: 4, days: -1)),
        endTime: DateTime.now().add(const Duration(hours: 5, days: -1)),
        subject: 'Release Meeting',
        color: Colors.lightBlueAccent,
        isAllDay: true));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 2, days: -4)),
      endTime: DateTime.now().add(const Duration(hours: 4, days: -4)),
      subject: 'Performance check',
      color: Colors.amber,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 11, days: -2)),
      endTime: DateTime.now().add(const Duration(hours: 12, days: -2)),
      subject: 'Customer Meeting   Tokyo, Japan',
      color: Color(0xFFffb8d62),
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 6, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 7, days: 2)),
      subject: 'Retrospective',
      color: Colors.purple,
    ));
 
    return _DataSource(appointments);
  }
}
 
class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source) {
    appointments = source;
  }
}

 

View sample in GitHub

 

monthview

timline month

 

 

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