Category / Section
How to customize the schedule view in the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can customize appointment item height, appointment text, day header, week header, month header of the `scheduleView` using the properties of `ScheduleViewSettings` in `SfCalendar`.
body: SafeArea( child: SfCalendar( view: CalendarView.schedule, dataSource: getCalendarDataSource(), scheduleViewSettings: ScheduleViewSettings( appointmentTextStyle: TextStyle( fontSize: 12, fontWeight: FontWeight.w500, color: Colors.lime), appointmentItemHeight: 70.0, dayHeaderSettings: DayHeaderSettings( dayFormat: 'EEEE', width: 70, dateTextStyle: TextStyle( fontSize: 20, fontWeight: FontWeight.w300, color: Colors.red, ), dayTextStyle: TextStyle( fontSize: 10, fontWeight: FontWeight.w300, color: Colors.red, )), hideEmptyScheduleWeek: true, monthHeaderSettings: MonthHeaderSettings( monthFormat: 'MMMM, yyyy', height: 100, textAlign: TextAlign.left, backgroundColor: Colors.green, monthTextStyle: TextStyle( color: Colors.red, fontSize: 25, fontWeight: FontWeight.w400)), weekHeaderSettings: WeekHeaderSettings( startDateFormat: 'dd MMM ', endDateFormat: 'dd MMM, yy', height: 50, textAlign: TextAlign.center, backgroundColor: Colors.red, weekTextStyle: TextStyle( color: Colors.white, fontWeight: FontWeight.w400, fontSize: 15, ), )), ), ),
By using the hideEmptyScheduleWeek, you can hide the weeks that do not have appointments.
Reference blog: https://www.syncfusion.com/blogs/post/introducing-the-new-schedule-view-in-flutter-event-calendar.aspx
|
|
|
