Category / Section
How to use multiple recurrence rule (RRule) in special region using Flutter Calendar
1 min read
In the Flutter Event Calendar, you can use the different recurrenceRule for highlighting different timeslots using the ‘specialRegions’ property of Calendar.
STEP 1: Add the multiple time region using the ‘startTime’, ’endTime’ properties of the `TimeRegion`. Using multiple recurrence rules for the time region to highlight the different timeslots.
List<TimeRegion> _getTimeRegions() {
final List<TimeRegion> regions = <TimeRegion>[];
regions.add(TimeRegion(
startTime: DateTime(2020, 5, 29, 00, 0, 0),
endTime: DateTime(2020, 5, 29, 24, 0, 0),
recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=SAT,SUN',
color: Color(0xffbD3D3D3),
enablePointerInteraction: true,
));
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: true,
));
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: true,
));
regions.add(TimeRegion(
startTime: DateTime(2020, 5, 29, 13, 0, 0),
endTime: DateTime(2020, 5, 29, 14, 0, 0),
recurrenceRule: 'FREQ=DAILY;INTERVAL=1',
color: Color(0xffbD3D3D3),
enablePointerInteraction: true,
));
return regions;
}
STEP 2: 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, 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
|
|
|
