Articles in this section
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() and assign its return value to the specialRegions property of the SfCalendar widget:

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

View the GitHub sample here

 

 

multiple recurrence rule

 

 

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