Articles in this section
Category / Section

How to show and customize the week number in the Flutter Calendar (SfCalendar)

1 min read

In the Flutter Calendar, show the week number of the month by using the showWeekNumber property of the calendar.

By using weekNumberStyle property of the calendar, customize the week number styles.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
 
void main() => runApp(const WeekNumber());
 
class WeekNumber extends StatefulWidget {
  const WeekNumber({Key? key}) : super(key: key);
 
  @override
  State<StatefulWidget> createState() => WeekNumberCustomization();
}
 
class WeekNumberCustomization extends State<WeekNumber> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: SafeArea(
        child: SfCalendar(
          showWeekNumber: true,
          view: CalendarView.month,
          allowedViews: const[
            CalendarView.day,
            CalendarView.week,
            CalendarView.workWeek,
            CalendarView.month,
            CalendarView.timelineDay,
            CalendarView.timelineWeek,
            CalendarView.timelineWorkWeek,
            CalendarView.timelineMonth
          ],
          weekNumberStyle: const WeekNumberStyle(
              textStyle: TextStyle(color: Colors.amber),
              backgroundColor: Color(0xFFDF5E5E)),
        ),
      )),
    );
  }
}

View sample in GitHub

Flutter Calendar week number gif

 

 

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