Articles in this section
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

View the GitHub sample here

Flutter special region

 

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