How to reload list of appointments

Question

I'm trying perform change appointment status and rebuild when operation has completed on API.

i tried to use notifyListeners, but not having success.

_controller.appointmentDataSource.notifyListeners(CalendarDataSourceAction.add, _controller.appointments);
// here appointment has been updated with a property updated on database.
// this method executed after operation in onPressed function button has completed

I'm using day view in calendar

My SfCalendar uses: dataSource: _controller.appointmentDataSource,

SfCalendar(
            controller: _controller.calendarController,
            timeZone: 'E. South America Standard Time',
            firstDayOfWeek: 1,
            headerHeight: 0,
            viewHeaderHeight: 0,
            showCurrentTimeIndicator: false,
            specialRegions: _controller.getSpecialRegions([]),
            timeRegionBuilder: timeregionBuilder,
            dataSource: _controller.appointmentDataSource,
            appointmentBuilder: appointmentBuilder,
            timeSlotViewSettings: TimeSlotViewSettings(
              startHour: _controller.minWeekStartTime,
              endHour: _controller.maxWeekStartTime,
              timeFormat: 'HH:mm',
              dayFormat: 'EEE',
              timeInterval: const Duration(hours: 1),
              timeIntervalHeight: 120,
              timeTextStyle: const TextStyle(fontWeight: FontWeight.w700, color: Colors.black54),
            ),
            // showDatePickerButton: true,
            onViewChanged: (details) {
              WidgetsBinding.instance?.addPostFrameCallback((_) {
                _controller.getSpecialRegions(details.visibleDates);
                _controller.dateRangePickerController.displayDate = details.visibleDates[0];
                _controller.dateRangePickerController.selectedDate = details.visibleDates[0];
                setState(() {});
              });
            },
            onTap: (CalendarTapDetails details) {
              if (details.appointments != null) {
                final app = details.appointments!.first as business.Appointment;
                getEditOptionsBottomSheet(app);
              } else {
                getOptionsBottomSheet(details.date!);
              }
            },
            loadMoreWidgetBuilder: (BuildContext context, LoadMoreCallback loadMoreAppointments) {
              return FutureBuilder(
                future: loadMoreAppointments(),
                builder: (context, snapShot) {
                  // print(snapShot.connectionState);
                  return Container(
                    alignment: Alignment.center,
                    child: const LoadingIndicator(),
                  );
                },
              );
            },
            cellBorderColor: Colors.transparent,
          ),

Atte, Adelmo.

Indumathi Ravichandran · Accepted Answer

Hi ADELMO,Regarding Query: Change color of title when appointment is closedBased on the shared code snippet, we suspect your
requirement is “Changing the color of the appointment based on the subject
in appointmentbuilder of the Flutter Calendar”. We have prepared the simple
sample with appointmentBuilder, and it was working fine. We have attached the
code snippet for the same. Please find the code snippet for the same.Code snippet:

Widget appointmentBuilder(BuildContext context,
     
  CalendarAppointmentDetails calendarAppointmentDetails) {
    final Appointment
  appointment =
       
  calendarAppointmentDetails.appointments.first;
    return Column(
      children: [
        Container(
            width:
  calendarAppointmentDetails.bounds.width,
            height:
  calendarAppointmentDetails.bounds.height / 2,
            color:
  appointment.color,
            child:
  Center(
              child:
  Icon(
               
  Icons.group,
                color:
  Colors.black,
              ),
            )),
        Container(
          width:
  calendarAppointmentDetails.bounds.width,
          height:
  calendarAppointmentDetails.bounds.height / 2,
          color:
  appointment.color,
          child: Text(
           
  appointment.subject +
               
  DateFormat(' (hh:mm a').format(appointment.startTime) +
                '-' +
                DateFormat('hh:mm
  a)').format(appointment.endTime),
            textAlign:
  TextAlign.center,
            style:
  TextStyle(
               
  fontSize: 10,
                color:
  appointment.subject == "Planning"
                    ?
  Colors.yellow
                    :
  Colors.lightBlueAccent),
          ),
        )
      ],
    );
  }

We
hope that this helps you. Please let us know if you need further assistance.Regards,Indumathi
R

Indumathi Ravichandran · Answer

Hi ADELMO,Regarding Query: Reload list of appointments.Based on the shared information, we suspect your requirement is “Reload the calendar appointments with new appointments in the Flutter Calendar”. By clearing the appointments in the data source and add the required appointments with notifyListeners. We have attached the simple code snippet for the same. Please find the code snippet from the below.Code snippet: TextButton( onPressed: () { _calendarDataSource.appointments?.clear(); List app = []; app.add(Appointment( Subject: Meeting', StartTime: DateTime(2022, 12, 18, 10), EndTime: DateTime(2022, 12, 18, 11), Color: Colors.red, )); for (int i = 0; i < app.length; i++) { _calendarDataSource.appointments!.add(app[i]); } _calendarDataSource.notifyListeners( CalendarDataSourceAction.reset, _calendarDataSource.appointments!); }, child: Text("Click")), We hope that this helps you. If this is not your requirement, can you please share more details about your requirement clearly? It would be helpful for us to analyze and provide you a solution at the earliest.Regards,Indumathi R

ADELMO DOS SANTOS JUNIOR · Answer

Hi Indumathi R,

What I need is that when I change the appointment, it considers reloading the appointmentBuilder, as there are rules I use to change the appointments board view..

e.g.: Change color of title when appointment is closed

my appointmentBuilder

Widget appointmentBuilder(BuildContext context, CalendarAppointmentDetails calendarAppointmentDetails) {
  final appointmentData = calendarAppointmentDetails.appointments.first;
  late final business.Appointment appointmentBusinessModel;
  if (appointmentData is business.Appointment) {
    appointmentBusinessModel = appointmentData;
  }
  final _controller = Get.find<HomeController>();
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Padding(
        padding: const EdgeInsets.only(left: 5.0),
        child: Container(
          width: calendarAppointmentDetails.bounds.width,
          height: calendarAppointmentDetails.bounds.height * .75,
          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8), boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 0.5,
              blurRadius: 5,
              offset: const Offset(4, 8),
            ),
          ]),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 5,
                decoration: BoxDecoration(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(3),
                    bottomLeft: Radius.circular(3),
                  ),
                  color: appointmentBusinessModel.requireApprovation == true
                      ? const Color.fromARGB(255, 85, 85, 85)
                      : const Color(0xFFFF92C2),
                ),
              ),
              const SizedBox(
                width: 5,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Flexible(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            DateFormat('HH:mm').format(
                                  TZDateTime.from(
                                    appointmentBusinessModel.startAppointment,
                                    getLocation('America/Sao_Paulo'),
                                  ),
                                ) +
                                ' - ' +
                                appointmentBusinessModel.clientName,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: _controller.calendarController.view == CalendarView.day ? 14 : 10,
                              color: Colors.black54,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    Flexible(
                      child: Row(
                        children: [
                          Text(
                            appointmentBusinessModel.servicesToString() + ' - ',
                            style: const TextStyle(
                              fontSize: 12,
                            ),
                          ),
                          Text(
                            NumberFormat.currency(locale: 'pt_BR', symbol: 'R\$').format(
                              appointmentBusinessModel.price,
                            ),
                            style: TextStyle(
                              color: appointmentBusinessModel.status == 'CLOSED' ? Colors.green : Colors.redAccent,
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )
    ],
  );
}

Attachment: Syncfusion_Example_30df9f12.zip