Scroll postion for Events Calendar Position

By default, the event calendar view has a scroll position that often starts above the current date. I would like it to preferably start with the current day at the top of the screen or if that's not possible, with the month header at the top. depending on the number of events, it's closer or further from the event. I have attached a screenshot and code below.
Image_1413_1723554713301



SfCalendar(
view: CalendarView.schedule,
onTap: (calendarTapDetails) => Calendar.onTap(calendarTapDetails, context),
headerStyle: const CalendarHeaderStyle(
textStyle: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
dataSource: GoogleDataSource(events: snapshot.data, ref: ref),
scheduleViewSettings: const ScheduleViewSettings(
hideEmptyScheduleWeek: true,
weekHeaderSettings: WeekHeaderSettings(
startDateFormat: '',
endDateFormat: '',
height: 0,
weekTextStyle: TextStyle(
color: Colors.white,
fontSize: 0,
),
)
),
scheduleViewMonthHeaderBuilder: scheduleViewHeaderBuilder,
),


Widget scheduleViewHeaderBuilder(
BuildContext buildContext, ScheduleViewMonthHeaderDetails details) {
final String monthName = getMonthName(details.date.month);
return Stack(
children: [
Image(
image: ExactAssetImage('assets/$monthName.png'),
fit: BoxFit.cover,
width: details.bounds.width,
height: details.bounds.height),
Positioned(
left: 55,
right: 0,
top: 20,
bottom: 0,
child: Text(
'$monthName ${details.date.year}',
style: const TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
)
),
],
);
}



1 Reply 1 reply marked as answer

PS Preethika Selvam Syncfusion Team August 14, 2024 01:59 PM UTC

Hi Dresden,


We have analyzed your query according to our current implementation the schedule view of SfCalendar shows a list of scheduled appointments grouped by week, between min, and max dates, by default displaying the appointments from the current date. If the DataSource property of SfCalendar is null then the schedule view will display the month, week, and date headers alone in the view. This behavior is working fine as expected. We have shared a UG, KB and live sample for your reference.

UG Link: https://help.syncfusion.com/flutter/calendar/schedule-view

KB Link: https://support.syncfusion.com/kb/article/10399/how-to-customize-the-schedule-view-month-header-using-builder-in-the-flutter-calendar

Live Sample Link: https://flutter.syncfusion.com/#/event-calendar/schedule-view


We have found that you have used a  hideEmptyScheduleWeek property of scheduleViewSettings. This property is used to hide the weeks that do not have an appointment on it in schedule view, so the default view will change so the current date position is changed. This is a current behavior. If you need to display the appointments from the current date along with the hideEmptyScheduleWeek we suggest setting the controller's display date to ‘DateTime.now’, we have shared a code snippet for your reference. You can modify it based on your needs.


Code snippet:


@override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Scaffold(

        body: SafeArea(

          child: SfCalendar(

            view: CalendarView.schedule,

            dataSource: _getDataSource(),

            controller: CalendarController()..displayDate = DateTime.now(),

            scheduleViewSettings: const ScheduleViewSettings(

              hideEmptyScheduleWeek: true,

              weekHeaderSettings: WeekHeaderSettings(

                startDateFormat: '',

                endDateFormat: '',

                height: 0,

                weekTextStyle: TextStyle(

                  color: Colors.white,

                  fontSize: 0,

                ),

              ),

            ),

            scheduleViewMonthHeaderBuilder: scheduleViewHeaderBuilder,

          ),

        ),

      ),

    );

  }


Please let us know if you need any further assistance.


Regards,

Preethika Selvam.


Marked as answer
Loader.
Up arrow icon