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 Calendar.
STEP 1: Add the time region for working and non-working hour time slots using the ‘startTime’, ’endTime’ properties of the `TimeRegion`. Using recurrence rule property of the time region to repeat the time regions for all days after the start time 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 customize the specified time slot of the SfCalendar. Please find the code snippet for the same.
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
|
