How to add resources in the Flutter Calendar

4 mins read

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

STEP 1: Set default values for the Calendar in `initState()`:

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 the corresponding properties of the calendar.

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

View the GitHub sample here

resource view

Did you find this information helpful?

Yes

Didn't find an answer? Contact Support

Comments (0)

Please to leave a comment

How to add resources in the Flutter Calendar

Access denied