SfCalender appointment resize width automaticaly in dayview

[xyzbilal]

When I choose dayview my appoinments occupy full width shown in first image and after a second it resize to half width; What can be the reason for it?

myAppoinmentBuilder is like below;

 appointmentBuilder: (ctx, CalendarAppointmentDetails details) {
                Meeting meet = details.appointments.first;

                c.loadingDetails.putIfAbsent( details.appointments.first.id,() => false.obs);
              return GestureDetector(
                      child: Container(
                         width: details.bounds.width,
                        height: details.bounds.height,
                          decoration: BoxDecoration(
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(5)),
                              color: meet.background
                              // Color.fromRGBO(Random().nextInt(230),
                              // Random().nextInt(230), Random().nextInt(230), 1)
                              ),

                          padding: const EdgeInsets.all(5),
                          child:ObxValue((RxBool loading) {

                          if(loading.value)
                          return Text("Yükleniyor..");

                     return      c.viewMode == CalendarView.month ||
                                  c.viewMode == CalendarView.day ||
                                  c.viewMode == CalendarView.schedule
                              ? SingleChildScrollView(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        children: [
                                          Flexible(
                                            child: Text(meet.eventName,
                                                overflow: TextOverflow.fade,
                                                maxLines: 1,
                                                style: const TextStyle(
                                                    fontSize: 9,
                                                    color: Colors.white)),
                                          ),
                                        ],
                                      ),
                                      5.height,
                                      if (!meet.isAllDay)
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            Flexible(
                                              child: Text(
                                                  meet.start! + " " + meet.end!,
                                                  overflow: TextOverflow.fade,
                                                  maxLines: 1,
                                                  style: const TextStyle(
                                                      fontSize: 8,
                                                      color: Colors.white)),
                                            ),
                                          ],
                                        ),
                                    ],
                                  ),
                                )
                              : Text(
                                  meet.eventName,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: const TextStyle(
                                      fontSize: 11, color: Colors.white),
                                );},c.loadingDetails[details.appointments.first.id]!)),
                     onLongPress: () {
                        c.showDetails(details.appointments.first.id);
                      },
                      onTap: () {
                        c.showDetails(details.appointments.first.id);
                      },
                    );
              }

[Indumathi1195R]

Xyzbilal,

As per the shared code snippet, we have checked the issue ”Appointment was automatically resizing using appbuilder in the Flutter Calendar” and we are unable to reproduce the issue, it was working fine as expected. We have attached the sample based on the shared code snippet. Please check the sample and let us know still if you are facing same issue? If not, please modify the sample based on your scenario and revert us with following details,

appbuilder_calendar.zip

• Flutter Calendar version • Issue reproducing video and procedure

It will be helpful for us to check on it and provide you solution at the earliest.

[xyzbilal]

The problem is raised when onViewChanged callback reloading appointments downloaded from api. I use Getx as stateManagement. I have meetings variable that calendar rebuilds according to meetings. I have logic that when view change I create network request that downloads events from api. after downloading events OBxValue rebuilds SFCalendar and problem is rises.

adding key to SfCalendar causes onviewChanged called continuesly.

this block calls api call when view change;

 ever(dateRange, (callback){
      if(loading)return;
        getDataSource("range");

    });

this function downloads events and adds to meetings list that updates sfcalendar.

Future<void> getDataSource(from) async {  

    String selectedPriorities = "";

    for (var pr in priorities) {
        if(pr.value)selectedPriorities += pr.id+",";
    }

  if(dateRange.length ==1){
    DateTime nextDate = dateRange.first.add(const Duration(days: 1));
    nextDate = nextDate.subtract(const Duration(seconds: 1));
    dateRange.add(nextDate);
  }

  String range = "start=${dateRange.first}&end=${dateRange.last}";

    final events = await repository.getEvents(selectedPriorities,  selectedOtherCalendar.value.userId,range,
    (id)=>showDetails(id));
      loading = false;
      meetColors.addAll(events.meetColors);    

      meetings.clear();

      meetings.addAll(events.meets);

  }  

 ObxValue((RxList<Meeting> meets)  {
          return SfCalendar(
              controller: c.calenderController,
              initialDisplayDate: DateTime.now(),
              view: c.viewMode,
              firstDayOfWeek: 1,
              showNavigationArrow: c.viewMode == CalendarView.day,
              todayTextStyle: TextStyle(
                  color: primaryTextColor,
                  fontSize: 16,
                  fontWeight: FontWeight.w400),

              onViewChanged: (dets) {
                List<DateTime> dates = dets.visibleDates;

                if (c.viewMode == CalendarView.schedule && dates.length == 1) {
                  dates.add(dates.first.add(const Duration(days: 180)));
                }

                // WHEN DATE RANGE VALUE CHANGES IT CREATES NETWORK REQUEST THAT DOWNLOADS  

                  c.dateRange.value = dates;

               },
              scheduleViewSettings: ScheduleViewSettings(
                appointmentTextStyle: const TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: Colors.lime),
                dayHeaderSettings: DayHeaderSettings(
                    dayTextStyle: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w300,
                      color: primaryTextColor,
                    ),
                    dateTextStyle: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.w300,
                      color: primaryTextColor,
                    )),
              ),
              onTap: (dets) {
                if (c.viewMode == CalendarView.week) {
                  c.changeCalendarMode("gun");
                }
              },
              onLongPress: (dets) {
                bool canView = user!.permissions.calendarViewUserId
                        .contains(c.selectedOtherCalendar.value.userId) ||
                    c.selectedOtherCalendar.value.userId == user!.id ||
                    user!.permissions.calendarViewUserId.contains(user!.id);

                bool canEdit = user!.permissions.calendarEditUserId
                        .contains(c.selectedOtherCalendar.value.userId) ||
                    c.selectedOtherCalendar.value.userId == user!.id ||
                    user!.permissions.calendarEditUserId.contains(user!.id);

                if (canView || canEdit) {
                  c.calendarEventDetails.value = null;
                  if (canEdit) {
                    c.editing.value = true;
                  }
                  c.shouldClose = false;
                  c.addOrEditAppoinment(dets);
                } else {
                  snackBar(
                      title: "HATA",
                      content: "Bu takvimi düzenleme yetkiniz yok.");
                }
              },
              dataSource: MeetingDataSource(c.meetings.value),
              headerStyle: CalendarHeaderStyle(
                  textStyle: TextStyle(
                      color: primaryTextColor,
                      fontSize: 18,
                      fontWeight: FontWeight.w400)),
              viewHeaderStyle: ViewHeaderStyle(
                  dateTextStyle: TextStyle(
                      color: primaryTextColor,
                      fontSize: 18,
                      fontWeight: FontWeight.w400),
                  dayTextStyle: TextStyle(
                      color: primaryTextColor,
                      fontSize: 13,
                      fontWeight: FontWeight.w400)),
              monthViewSettings: MonthViewSettings(
                  navigationDirection: MonthNavigationDirection.vertical,
                  appointmentDisplayCount: 3,
                  numberOfWeeksInView: 5,
                  agendaItemHeight: 50,
                  agendaViewHeight: 150,
                  showAgenda: true,
                  agendaStyle: AgendaStyle(
                      dayTextStyle: TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.w300,
                        color: primaryTextColor,
                      ),
                      dateTextStyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                        color: primaryTextColor,
                      )),
                  monthCellStyle: MonthCellStyle(
                      textStyle: TextStyle(
                          color: primaryTextColor,
                          fontSize: 16,
                          fontWeight: FontWeight.w400),
                      trailingDatesTextStyle:
                          TextStyle(color: primaryTextColor),
                      leadingDatesTextStyle:
                          const TextStyle(color: Colors.grey))),
              timeSlotViewSettings: TimeSlotViewSettings(
                  timeTextStyle: TextStyle(
                      color: primaryTextColor,
                      fontSize: 12,
                      fontWeight: FontWeight.w300)),
              cellBorderColor: prefs.darkMode ? Colors.grey : null,

              appointmentBuilder: (ctx, CalendarAppointmentDetails details) {
                Meeting meet = details.appointments.first;
                c.loadingDetails.putIfAbsent(
                    details.appointments.first.id, () => false.obs);

                return Container(
                  width: details.bounds.width,
                  height: details.bounds.height,
                  decoration: BoxDecoration(
                      borderRadius: const BorderRadius.all(Radius.circular(5)),
                      color: meet.background),
                  padding: const EdgeInsets.all(5),
                  child: GestureDetector(
                    child: ObxValue((RxBool loading) {
                      if (loading.value) return Text("Yükleniyor..");

                      return c.viewMode == CalendarView.month ||
                              c.viewMode == CalendarView.day ||
                              c.viewMode == CalendarView.schedule

                          ? SingleChildScrollView(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    mainAxisSize: MainAxisSize.max,
                                    mainAxisAlignment: MainAxisAlignment.start,
                                    children: [
                                      Flexible(
                                        child: Text(meet.eventName,
                                            overflow: TextOverflow.fade,
                                            maxLines: 1,
                                            style: const TextStyle(
                                                fontSize: 9,
                                                color: Colors.white)),
                                      ),
                                    ],
                                  ),
                                  5.height,
                                  if (!meet.isAllDay)
                                    Row(
                                      mainAxisSize: MainAxisSize.max,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        Flexible(
                                          child: Text(
                                              meet.start! + " " + meet.end!,
                                              overflow: TextOverflow.fade,
                                              maxLines: 1,
                                              style: const TextStyle(
                                                  fontSize: 8,
                                                  color: Colors.white)),
                                        ),
                                      ],
                                    ),
                                ],
                              ),
                            )
                          : Text(
                              meet.eventName,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 2,
                              style: const TextStyle(
                                  fontSize: 11, color: Colors.white),
                            );
                    }, c.loadingDetails[details.appointments.first.id]!),
                    onLongPress: () {
                      c.showDetails(details.appointments.first.id);
                    },
                    onTap: () {
                      c.showDetails(details.appointments.first.id);
                    },
                  ),
                );
              });
        }, c.meetings)

in my opinion onViewChanged called initially when calendar loaded first time causes to call api function repeatedly and causes unwanted behave.

[IndumathiR-1995]

Hi,

As per the shared information, we have checked the mentioned issue “Appointment width resizing to half width of the appointment in the Flutter Calendar”. We have ensured this by using appointment builder, appointment occupied proper width properly, it was working fine as expected. We have prepared the simple sample for the same. Please find the sample from the attached link. If possible, can you please replicate the issue in the attached sample. It would be helpful for us to analyze and provide you a solution at the earliest.

Regards, Indumathi R appbuilder_calendar.zip

[LavanyaGowtham2021]

Please reopen this ticket with requested details to proceed further on this.