Articles in this section
Category / Section

How to change the alldaypanel background color in the Flutter Calendar?

1 min read

In the Flutter Calendar, you can provide the background color for the all-day panel.

By using the allDayPanelColor property of the timeSlotViewSettings.

child: SfCalendar(
  allowedViews: const [CalendarView.day,CalendarView.workWeek,CalendarView.week],
  timeSlotViewSettings: const TimeSlotViewSettings(allDayPanelColor: Colors.deepPurple),
  dataSource: _getCalendarDataSource(),
  view: CalendarView.day,
)
 
_DataSource _getCalendarDataSource() {
  List<Meeting> appointments = <Meeting>[];
  appointments.add(Meeting(
      from: DateTime.now(),
      to: DateTime.now().add(const Duration(minutes: 20)),
      content: 'Meeting',
      background: Colors.greenAccent,
      isAllDay: true
  ));
  appointments.add(Meeting(
    from: DateTime.now().add(const Duration(days: 1)),
    to: DateTime.now().add(const Duration(hours: 2, days: 1)),
    content: 'Planning',
    background: Colors.deepPurple,
  ));
 
  appointments.add(Meeting(
    from: DateTime.now().add(const Duration(days: -2, hours: 2)),
    to: DateTime.now().add(const Duration(hours: 3, days: -2)),
    content: 'Retrospective',
    background: Colors.amber,
  ));
 
  appointments.add(Meeting(
      from: DateTime.now().add(const Duration(days: -5, hours: 2)),
      to: DateTime.now().add(const Duration(hours: 3, days: -5)),
      content: 'Anniversary',
      background: Colors.green,
      isAllDay: true));
 
  appointments.add(Meeting(
    from: DateTime.now().add(const Duration(days: -2, hours: 5)),
    to: DateTime.now().add(const Duration(hours: 6, days: -2)),
    content: 'Sprint planning',
    background: Colors.red,
  ));
 
  return _DataSource(appointments);
}

View sample in GitHub

Flutter Calendar all day panel background

 

 

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