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); }