Articles in this section
Category / Section

How to handle appointments for multiple resources in the Flutter Calendar

2 mins read

In the Flutter Event Calendar, you can show the particular resource appointments using the `Switch` widget.

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

bool _isJoseph = false;
bool _isStephen = false;
List<Appointment>? _appointments;
DataSource? _dataSource;
List<Appointment>? _josephAppointments, _stephenAppointments;
 
@override
void initState() {
  _dataSource = _getCalendarDataSource();
  super.initState();
}

 

STEP 2: Add appointments accordingly to the respective resources. When the switch is toggled, respective appointment is displayed in the view and when it is toggled back, appointment collection gets cleared.

SafeArea(
  child: Row(
    children: <Widget>[
      Switch(
        value: _isJoseph,
        onChanged: (value) {
          setState(() {
            if (value) {
              _updateJosephAppointments();
              _dataSource!.appointments!.addAll(_josephAppointments!);
              _dataSource!.notifyListeners(
                  CalendarDataSourceAction.reset, _josephAppointments!);
            } else {
              for (int i = 0; i < _josephAppointments!.length; i++) {
                _dataSource!.appointments!.remove(_josephAppointments![i]);
              }
              _josephAppointments!.clear();
              _dataSource!.notifyListeners(
                  CalendarDataSourceAction.reset, _josephAppointments!);
            }
            _isJoseph = value;
          });
        },
        activeTrackColor: Colors.lightGreenAccent,
        activeColor: Colors.green,
      ),
      Text('Dr.Joseph (Nephrologist)'),
    ],
  ),
),
 
void _updateJosephAppointments() {
  _josephAppointments = _josephAppointments ?? <Appointment>[];
  Appointment newAppointment = Appointment(
    startTime: DateTime.now(),
    endTime: DateTime.now().add(Duration(hours: 1)),
    subject: 'Interactive Live Workshop on Robotic Surgery in Gynecology',
    color: Colors.lightGreen,
  );
  Appointment newAppointment1 = Appointment(
    startTime: DateTime.now().add(Duration(days: -3, hours: 6)),
    endTime: DateTime.now().add(Duration(days: -3, hours: 7)),
    subject:
    'Billion Hearts Beating brings you Happy Heart Fest to celebrate World Heart Day',
    color: Colors.lightGreen,
  );
  Appointment newAppointment2 = Appointment(
    startTime: DateTime.now().add(Duration(days: -2, hours: 5)),
    endTime: DateTime.now().add(Duration(days: -2, hours: 6)),
    subject: 'Join Hands for Patient Safety',
    color: Colors.lightGreen,
  );
  Appointment newAppointment3 = Appointment(
    startTime: DateTime.now().add(Duration(days: -1, hours: 4)),
    endTime: DateTime.now().add(Duration(days: -1, hours: 5)),
    subject: 'Robotic GI Surgery International Congress',
    color: Colors.lightGreen,
  );
  Appointment newAppointment4 = Appointment(
    startTime: DateTime.now().add(Duration(days: 3, hours: 8)),
    endTime: DateTime.now().add(Duration(days: 3, hours: 9)),
    subject: 'World Continence Week - Free Check-up Camp for women',
    color: Colors.lightGreen,
  );
  _josephAppointments!.add(newAppointment);
  _josephAppointments!.add(newAppointment1);
  _josephAppointments!.add(newAppointment2);
  _josephAppointments!.add(newAppointment3);
  _josephAppointments!.add(newAppointment4);
}
 
void _updateStephenAppointments() {
  _stephenAppointments = _stephenAppointments ?? <Appointment>[];
  Appointment newAppointment5 = Appointment(
    startTime: DateTime.now(),
    endTime: DateTime.now().add(Duration(hours: 1)),
    subject: 'CME (Continuing Medical Education) Program',
    color: Colors.lightBlue,
  );
  Appointment newAppointment6 = Appointment(
    startTime: DateTime.now().add(Duration(days: 1, hours: 4)),
    endTime: DateTime.now().add(Duration(days: 1, hours: 5)),
    subject: '4th Clinical Nutrition Update',
    color: Colors.lightBlue,
  );
  Appointment newAppointment7 = Appointment(
    startTime: DateTime.now().add(Duration(days: 2, hours: 3)),
    endTime: DateTime.now().add(Duration(days: 2, hours: 4)),
    subject: 'National CME on Contemporary Developments in Transplants',
    color: Colors.lightBlue,
  );
  Appointment newAppointment8 = Appointment(
    startTime: DateTime.now().add(Duration(days: 3, hours: 6)),
    endTime: DateTime.now().add(Duration(days: 3, hours: 7)),
    subject: 'Oncological Robotic Surgery',
    color: Colors.lightBlue,
  );
  Appointment newAppointment9 = Appointment(
    startTime: DateTime.now().add(Duration(days: -1, hours: 6)),
    endTime: DateTime.now().add(Duration(days: -1, hours: 7)),
    subject: 'World Ostomy Day and Awareness Program',
    color: Colors.lightBlue,
  );
  _stephenAppointments!.add(newAppointment5);
  _stephenAppointments!.add(newAppointment6);
  _stephenAppointments!.add(newAppointment7);
  _stephenAppointments!.add(newAppointment8);
  _stephenAppointments!.add(newAppointment9);
}

 

STEP 3: Place the calendar inside the Expanded widget.

Expanded(
    child: SfCalendar(
  view: CalendarView.week,
  dataSource: _dataSource,
))

 

View sample in GitHub

Multiple resources

single resource appointment

single resource appointment

 

 

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