Category / Section
How to customize the special time region using custom builder in the Flutter Calendar
2 mins read
In the Flutter Event Calendar, you can use the custom builder for the special time region by using the timeRegionBuilder property of the calendar.
STEP1: You can use any widget for special time region. Here we are using Icon widget for customization.
Widget timeRegionBuilder( BuildContext context, TimeRegionDetails timeRegionDetails) { if (timeRegionDetails.region.text == "Lunch") { return Container( color: timeRegionDetails.region.color, alignment: Alignment.center, child: Icon( Icons.restaurant, color: Colors.grey.withOpacity(0.5), ), ); } else if (timeRegionDetails.region.text == "WeekEnd") { return Container( color: timeRegionDetails.region.color, alignment: Alignment.center, child: Icon( Icons.weekend, color: Colors.grey.withOpacity(0.5), ), ); } }
STEP 2: Assign the widget to the timeRegionBuilder property of the calendar.
child: SfCalendar( view: CalendarView.week, specialRegions: _getTimeRegions(), timeRegionBuilder: timeRegionBuilder, )), List<TimeRegion> _getTimeRegions() { final List<TimeRegion> regions = <TimeRegion>[]; DateTime date = DateTime.now(); regions.add(TimeRegion( startTime: DateTime(2020, 12, 15, 13, 0, 0), endTime: DateTime(2020, 12, 15, 14, 0, 0), enablePointerInteraction: true, color: Colors.grey.withOpacity(0.2), recurrenceRule: 'FREQ=DAILY;INTERVAL=1', text: 'Lunch', )); regions.add(TimeRegion( startTime: DateTime(2020, 12, 15, 00, 0, 0), endTime: DateTime(2020, 12, 15, 24, 0, 0), recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=SAT,SUN', color: Color(0xffbD3D3D3), text: 'WeekEnd', )); return regions; }
|