Category / Section
How to highlight the working and non-working hours in the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can highlight the time slots for working and non-working hours using the ‘specialRegions’ property of the SfCalendar.
STEP 1: Add time region for working and non-working hour time slots using the ‘startTime’, ’endTime’ properties of the `TimeRegion`. Use the recurrenceRule property to repeat the time regions for all days after the start date.
List<TimeRegion> _getTimeRegions() { final List<TimeRegion> regions = <TimeRegion>[]; regions.add(TimeRegion( startTime: DateTime(2020, 5, 29, 00, 0, 0), endTime: DateTime(2020, 5, 29, 09, 0, 0), recurrenceRule: 'FREQ=DAILY;INTERVAL=1', color: Color(0xffbD3D3D3), enablePointerInteraction: false, )); regions.add(TimeRegion( startTime: DateTime(2020, 5, 29, 18, 0, 0), endTime: DateTime(2020, 5, 29, 24, 0, 0), recurrenceRule: 'FREQ=DAILY;INTERVAL=1', color: Color(0xffbD3D3D3), enablePointerInteraction: false, )); regions.add(TimeRegion( startTime: DateTime(2020, 5, 29, 09, 0, 0), endTime: DateTime(2020, 5, 29, 18, 0, 0), recurrenceRule: 'FREQ=DAILY;INTERVAL=1', color: Color(0xffb89cff0), enablePointerInteraction: false, )); return regions; }
STEP 3: Call the _getTimeRegions() method to apply the specified time slots to the SfCalendar widget:
body: SafeArea( child: SfCalendar( view: CalendarView.week, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, ], dataSource: getCalendarDataSource(), specialRegions: _getTimeRegions(), ), ),
Highlighted timeslots touch interaction can be enabled or disabled.
Reference blog: https://www.syncfusion.com/blogs/post/introducing-a-special-time-region-in-the-flutter-event-calendar.aspx