Category / Section
How to highlight the lunch hours in the Flutter Calendar
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
|
