Articles in this section
Category / Section

How to add resources in the Flutter Calendar

2 mins read

In the Flutter event calendar, you can group the appointment based on the available resource in the timeline views of the calendar.

STEP 1: In initState(), set the default values for calendar.

List<CalendarView> _allowedViews;
List<String> _subjectCollection;
List<Color> _colorCollection;
List<Appointment> _shiftCollection;
List<CalendarResource> _employeeCollection;
List<TimeRegion> _specialTimeRegions;
List<String> _nameCollection;
List<String> _userImages;
_DataSource _events;
 
@override
void initState() {
  _shiftCollection = <Appointment>[];
  _employeeCollection = <CalendarResource>[];
  _specialTimeRegions = <TimeRegion>[];
  _userImages = <String>[];
  _addResourceDetails();
  _addResources();
  _addSpecialRegions();
  _addAppointmentDetails();
  _addAppointments();
  _events = _DataSource(_shiftCollection, _employeeCollection);
  _allowedViews = <CalendarView>[
    CalendarView.timelineDay,
    CalendarView.timelineWeek,
    CalendarView.timelineWorkWeek,
    CalendarView.timelineMonth,
  ];
 
  super.initState();
}

STEP 2: Create a resource view by using the displayName, color, id and image properties of CalendarResource.

void _addResources() {
  Random random = Random();
  for (int i = 0; i < _nameCollection.length; i++) {
    _employeeCollection.add(CalendarResource(
        displayName: _nameCollection[i],
        id: '000' + i.toString(),
        color: Color.fromRGBO(
            random.nextInt(255), random.nextInt(255), random.nextInt(255), 1),
        image:
            i < _userImages.length ? ExactAssetImage(_userImages[i]) : null));
  }
}

STEP 3: You can add the resources to appointment by using the resources property of CalendarDataSource.

class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source, List<CalendarResource> resourceColl) {
    appointments = source;
    resources = resourceColl;
  }
}

STEP 4: You can assign the resources to the appointments by using the resourceIds property of Appointment.

void _addAppointments() {
  _shiftCollection = <Appointment>[];
  final Random random = Random();
  for (int i = 0; i < _employeeCollection.length; i++) {
    final List<String> _employeeIds = <String>[_employeeCollection[i].id];
    if (i == _employeeCollection.length - 1) {
      int index = random.nextInt(5);
      index = index == i ? index + 1 : index;
      _employeeIds.add(_employeeCollection[index].id);
    }
 
    for (int k = 0; k < 365; k++) {
      if (_employeeIds.length > 1 && k % 2 == 0) {
        continue;
      }
      for (int j = 0; j < 2; j++) {
        final DateTime date = DateTime.now().add(Duration(days: k + j));
        int startHour = 9 + random.nextInt(6);
        startHour =
            startHour >= 13 && startHour <= 14 ? startHour + 1 : startHour;
        final DateTime _shiftStartTime =
            DateTime(date.year, date.month, date.day, startHour, 0, 0);
        _shiftCollection.add(Appointment(
            startTime: _shiftStartTime,
            endTime: _shiftStartTime.add(Duration(hours: 1)),
            subject: _subjectCollection[random.nextInt(8)],
            color: _colorCollection[random.nextInt(8)],
            startTimeZone: '',
            endTimeZone: '',
            resourceIds: _employeeIds));
      }
    }
  }
}

STEP 5: Also, you can add the resources to the time regions by using the resources property of CalendarDataSource.

void _addSpecialRegions() {
  final DateTime date = DateTime.now();
  Random random = Random();
  for (int i = 0; i < _employeeCollection.length; i++) {
    _specialTimeRegions.add(TimeRegion(
        startTime: DateTime(date.year, date.month, date.day, 13, 0, 0),
        endTime: DateTime(date.year, date.month, date.day, 14, 0, 0),
        text: 'Lunch',
        resourceIds: <Object>[_employeeCollection[i].id],
        recurrenceRule: 'FREQ=DAILY;INTERVAL=1'));
 
    if (i % 2 == 0) {
      continue;
    }
 
    final DateTime startDate = DateTime(
        date.year, date.month, date.day, 17 + random.nextInt(7), 0, 0);
 
    _specialTimeRegions.add(TimeRegion(
      startTime: startDate,
      endTime: startDate.add(Duration(hours: 3)),
      text: 'Not Available',
      enablePointerInteraction: false,
      resourceIds: <Object>[_employeeCollection[i].id],
    ));
  }
}

STEP 6: Assign those events, special regions to corresponding properties of the calendar.

child: SfCalendar(
  view: CalendarView.timelineWeek,
  showDatePickerButton: true,
  allowedViews: _allowedViews,
  specialRegions: _specialTimeRegions,
  dataSource: _events,
),

View sample in GitHub

resource view

 

 

 

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