Category / Section
How to highlight the lunch hours in the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can highlight the time slot such as lunch hours using the ‘specialRegions’ property of Calendar.
STEP 1: Add the time region for lunch hour using the ‘startTime’, ’endTime’ properties of the `TimeRegion`. Use the `recurrenceRule ` property to repeat the time regions on all weekdays after the start date.
List<TimeRegion> _getTimeRegions() {
final List<TimeRegion> regions = <TimeRegion>[];
regions.add(TimeRegion(
startTime: DateTime(2020, 5, 29, 13, 0, 0),
endTime: DateTime(2020, 5, 29, 14, 0, 0),
recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MON,TUE,WED,THU,FRI',
text: "Special region",
color: Color(0xFFBD3D3D3),
enablePointerInteraction: true,
textStyle: TextStyle(
color: Colors.black,
)));
return regions;
}
STEP 2: Call the _getTimeRegions() method and assign it to the specialRegions property of 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
|
