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, ),
|
|
|
