Category / Section
How to add custom fonts in the Flutter Calendar
1 min read
In the Flutter event calendar, you can add custom fonts for calendar elements using monthCellStyle, headerStyle, viewHeaderStyle, timeTextStyle, ScheduleViewSettings.
STEP 1: Install the required custom font and add create fonts folder and add the fonts.
STEP 2: Also specify the fonts in Pubspec.yaml file.
fonts: - family: Roboto fonts: - asset: fonts/Roboto-Italic.ttf weight: 700 - family: SyneTactile fonts: - asset: fonts/SyneTactile-Regular.ttf weight: 700
STEP 3: Apply the custom font in monthCellStyle, headerStyle, viewHeaderStyle, timeTextStyle, ScheduleViewSettings, appointmentTextStyle of the calendar.
child: SfCalendar( view: CalendarView.day, allowedViews: <CalendarView>[ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, CalendarView.timelineMonth, CalendarView.schedule ], dataSource: _getDataSource(), monthViewSettings: MonthViewSettings( showAgenda: true, monthCellStyle: MonthCellStyle( textStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black), leadingDatesTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.grey), trailingDatesTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.grey)), agendaStyle: AgendaStyle( dayTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black), dateTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black), appointmentTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black))), headerStyle: CalendarHeaderStyle( textStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black)), viewHeaderStyle: ViewHeaderStyle( dayTextStyle: TextStyle(fontFamily: 'SyneTactile', color: Colors.black), dateTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black)), timeSlotViewSettings: TimeSlotViewSettings( timelineAppointmentHeight: 40, timeTextStyle: TextStyle(fontFamily: 'SyneTactile', color: Colors.black), ), scheduleViewSettings: ScheduleViewSettings( appointmentTextStyle: TextStyle(fontFamily: 'SyneTactile', color: Colors.black), dayHeaderSettings: DayHeaderSettings( dateTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black), dayTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black)), monthHeaderSettings: MonthHeaderSettings( monthTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black)), weekHeaderSettings: WeekHeaderSettings( weekTextStyle: TextStyle( fontFamily: 'SyneTactile', color: Colors.black)), ), appointmentTextStyle: TextStyle(fontFamily: 'SyneTactile', color: Colors.black), ),
Day view |
Week view |
Month view | |
Timeline day view |
Timeline week view |
Timeline work week | |
Timeline month view |
Schedule view |
Week view |