Articles in this section
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.

custom font

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),
),

View sample in GitHub

 

day

 

            Day view

 

work week

 

                  Week view

 

month

 

                      Month view

 

timeline day

 

        Timeline day view

 

timeline week

 

       Timeline week view

 

timeline workweek

 

         Timeline work week

 

timeline month

 

       Timeline month view

 

scheduleview

 

       Schedule view

 

week view

 

        Week view

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied