syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.
Other
1.98k stars 775 forks source link

SfCalendar not showing appointments in month cell #748

Closed kalpeshmayani closed 1 year ago

kalpeshmayani commented 1 year ago

SfCalendar not showing appointments in month cell when publish web code on amplify.

`SfCalendar( view: CalendarView.month, dataSource: calendarController.documentDataSource, todayHighlightColor: Theme.of(context).primaryColor, showNavigationArrow: true, showDatePickerButton: true, headerHeight: AppSizes.getWebSize(40), headerStyle: CalendarHeaderStyle( textAlign: TextAlign.center, backgroundColor: Theme.of(context).primaryColor, textStyle: GoogleFonts.montserrat( color: Theme.of(context).primaryColorLight, fontSize: AppSizes.getWebSize(AppSizes.largeTextSize), ), ), viewHeaderHeight: AppSizes.getWebSize(40), viewHeaderStyle: ViewHeaderStyle( dayTextStyle: GoogleFonts.montserrat( color: Theme.of(context).primaryColor, fontSize: AppSizes.getWebSize(AppSizes.largeTextSize), ), dateTextStyle: GoogleFonts.montserrat( color: Theme.of(context).primaryColor, fontSize: AppSizes.getWebSize(AppSizes.largeTextSize), ), ), monthViewSettings: const MonthViewSettings( appointmentDisplayMode: MonthAppointmentDisplayMode.none, dayFormat: 'EEE', showTrailingAndLeadingDates: false, ), selectionDecoration: BoxDecoration( color: AppColors.transparentColor, border: Border.all( color: Theme.of(context).primaryColor, width: AppSizes.getWebSize(1), ), ), onTap: (CalendarTapDetails details) { if (details.appointments != null && details.appointments!.isNotEmpty) { showDataOnDialog( context: context, startDate: DateFormat('yyyy-MM-dd').format(details.date!), endDate: DateFormat('yyyy-MM-dd').format(details.date!), onClose: () {}, ); } }, onViewChanged: (ViewChangedDetails details) { WidgetsBinding.instance.addPostFrameCallback(() { List dates = details.visibleDates;

              _calendarController.setStartDate(
                  DateFormat('yyyy-MM-dd').format(dates.first));
              _calendarController
                  .setEndDate(DateFormat('yyyy-MM-dd').format(dates.last));

              _calendarController.getEmpTaskReports();
            });
          },
          monthCellBuilder:
              (BuildContext buildContext, MonthCellDetails details) {
            int count = details.appointments.length;

            return Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                border: Border.all(
                  width: AppSizes.getWebSize(0.2),
                  color: Theme.of(context).dividerColor,
                ),
              ),
              child: Padding(
                padding: EdgeInsets.all(AppSizes.getWebSize(2)),
                child: Column(
                  children: [
                    Text(
                      details.date.day.toString(),
                      style: GoogleFonts.montserrat(
                        color: Theme.of(context).primaryColor,
                        fontSize:
                            AppSizes.getWebSize(AppSizes.mediumTextSize),
                      ),
                    ),
                    Expanded(
                      child: SingleChildScrollView(
                        child: Column(
                          children: [
                            ListView.builder(
                              shrinkWrap: true,
                              padding: EdgeInsets.only(
                                  top: AppSizes.getWebSize(5),
                                  bottom: AppSizes.getWebSize(4)),
                              itemCount: count > 4 ? 4 : count,
                              itemBuilder: (context, index) {
                                return Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: AppSizes.getWebSize(4),
                                      vertical: AppSizes.getWebSize(0.5)),
                                  child: Container(
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(
                                              AppSizes.getWebSize(2))),
                                      color: Theme.of(context).errorColor,
                                    ),
                                    padding: EdgeInsets.symmetric(
                                        horizontal: AppSizes.getWebSize(4),
                                        vertical: AppSizes.getWebSize(2)),
                                    child: TextWidget(
                                      context: context,
                                      data: details.appointments[index]
                                          .toString(),
                                      color: Theme.of(context)
                                          .primaryColorLight,
                                      // color: Theme.of(context).primaryColorDark,
                                      fontSize: AppSizes.lightTextSize,
                                      maxLines: 1,
                                      textOverflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                );
                              },
                            ),
                            count > 4
                                ? TextWidget(
                                    context: context,
                                    data: "+${count - 4} more",
                                    color: Theme.of(context).primaryColor,
                                    fontSize: AppSizes.lightTextSize,
                                  )
                                : const SizedBox(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        )`

Appointments are coming and showing fine on calendar in debug, profile and release build. but when I publish web code on amplify, appointments not coming and showing on calendar.

Is there any solution for this?

MuniappanSubramanian commented 1 year ago

According to the instructions provided, we followed the steps to check the reported issue but were unable to replicate it on our end. We conducted tests by loading appointments by using the month cell builder support. We have prepared a sample based on the given code snippets, which are attached for your reference.

Please note that the version of SfCalendar used for this test is 20.4.54.

For more information about the "monthCellBuilder" support in the calendar, please refer to our UG documentation at the following link: https://help.syncfusion.com/flutter/calendar/builders#month-cell-builder

Refer to our KB documentation about month cell customization using cell builder,

https://www.syncfusion.com/kb/12210/how-to-customize-the-month-cell-based-on-the-appointment-using-builder-in-the-flutter

Please check our sample and let us know if you are still facing the same issue. If the issue persists, please provide us with the following details:

A video demonstrating the issue you are facing. The code snippets for your calendar implementation. A reproducible sample that demonstrates the issue.

Providing these details would be helpful for us to investigate the issue and provide you with a solution as soon as possible

output.zip Sample.zip