Category / Section
How to add appointment for the selected resources using appointment editor in the Flutter Calendar
2 mins read
In the Flutter event calendar, you can add the appointment to the selected resource using the resource property of CalendarResource.
STEP 1: In initState(), set the default values for the calendar.
CalendarController _controller;
List<String> _eventNameCollection;
@override
void initState() {
_controller = CalendarController();
_addResourceDetails();
_employeeCollection = <CalendarResource>[];
_addResources();
_events = DataSource(_getMeetingDetails(), _employeeCollection);
_selectedAppointment = null;
_selectedColorIndex = 0;
_selectedTimeZoneIndex = 0;
_selectedResourceIndex = 0;
_subject = '';
_notes = '';
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),
));
}
}
STEP 3: You can add the resources to appointment by using the resources property of CalendarDataSource.
class DataSource extends CalendarDataSource {
DataSource(List<Meeting> source, List<CalendarResource> resourceColl) {
appointments = source;
resources = resourceColl;
}
}
STEP 4: Create a resource-picker class and add the ListView.builder widget for the selecting resources.
child: ListView.builder(
padding: const EdgeInsets.all(0),
itemCount: _colorCollection.length - 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
contentPadding: const EdgeInsets.all(0),
title: Text(_nameCollection[index]),
onTap: () {
setState(() {
_selectedResourceIndex = index;
});
// ignore: always_specify_types
Future.delayed(const Duration(milliseconds: 200), () {
// When task is over, close the dialog
Navigator.pop(context);
});
},
);
},
)),
STEP 5: Then based on the selected resource add an appointment for that resource.
IconButton(
padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
icon: const Icon(
Icons.done,
color: Colors.white,
),
onPressed: () {
final List<Meeting> meetings = <Meeting>[];
if (_selectedAppointment != null) {
_events.appointments.removeAt(
_events.appointments.indexOf(_selectedAppointment));
_events.notifyListeners(CalendarDataSourceAction.remove,
<Meeting>[]..add(_selectedAppointment));
}
meetings.add(Meeting(
from: _startDate,
to: _endDate,
background: _colorCollection[_selectedColorIndex],
startTimeZone: _selectedTimeZoneIndex == 0
? ''
: _timeZoneCollection[_selectedTimeZoneIndex],
endTimeZone: _selectedTimeZoneIndex == 0
? ''
: _timeZoneCollection[_selectedTimeZoneIndex],
description: _notes,
isAllDay: _isAllDay,
eventName: _subject == '' ? '(No title)' : _subject,
ids: <String>[_employeeCollection[_selectedResourceIndex].id]
));
_events.appointments.add(meetings[0]);
_events.notifyListeners(
CalendarDataSourceAction.add, meetings);
_selectedAppointment = null;
Navigator.pop(context);
})
STEP 6: Assign those events to the dataSource property of the calendar.
child: SafeArea( child: SfCalendar( view: CalendarView.timelineDay, allowedViews: <CalendarView>[ CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth ], dataSource: _events, onTap: onCalendarTapped, monthViewSettings: MonthViewSettings( appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), ))));
|
