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

View sample in GitHub

 

  time region builder

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied