Category / Section
How to add resources in the Flutter Calendar
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, ),
|
|
|
