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() 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

View sample in GitHub

 

 

multiple recurrence rule

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied