Category / Section
How to customize the special time region using custom builder in the Flutter Calendar
In the Flutter Event Calendar, you can customize special time regions by using the timeRegionBuilder property of the calendar.
STEP1: You can use any widget for special time region. In this example, we are using the `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 you created 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;
}
|
