How to change header formatting in Flutter table

I have the following calendar and code. How can I have the month be only 3 letters eg Nov 2021 instead of November 2021.

 Container(
      height: MediaQuery.of(context).size.height*0.3,
      // width: MediaQuery.of(context).size.width*0.3,
      color: Colors.white,
      child: TableCalendar(
        headerStyle: HeaderStyle(
          titleTextStyle: TextStyle(fontSize: 12)
        ),
      shouldFillViewport: true,
      rowHeight:MediaQuery.of(context).size.height*0.02,
      firstDay: DateTime.utc(2010, 10, 16),
      lastDay: DateTime.utc(2030, 3, 14),
      focusedDay: DateTime.now(),
      onDaySelected: (selectedDay, focusedDay) {
        if (!isSameDay(_selectedDay, selectedDay)) {
          // Call `setState()` when updating the selected day
          setState(() {
            _selectedDay = selectedDay;
            _focusedDay = focusedDay;
          });
        }
      }
        ),
    ),

CodePudding user response：

To remove 2 weeks use different calendarFormat

To change Header titile use titleTextFormatter

And finally play with PositionedOffset to control positions.

** Everything that is possible to change is documented here: https://pub.dev/documentation/table_calendar/latest/table_calendar/table_calendar-library.html

CodePudding user response：

I achieved a responsive table with the customisation I wanted using this code:

 Container(
          height: MediaQuery.of(context).size.height*0.3,
          color: Colors.white,
          child: TableCalendar(
            calendarStyle: CalendarStyle(
              todayTextStyle: TextStyle(fontSize: MediaQuery.of(context).size.width*0.008,color: Colors.white),
              weekendTextStyle: TextStyle(fontSize: MediaQuery.of(context).size.width*0.008),
              outsideTextStyle: TextStyle(fontSize: MediaQuery.of(context).size.width*0.008),
              defaultTextStyle: TextStyle(
                  fontSize: MediaQuery.of(context).size.width*0.008
              )
            ) ,
            headerStyle: HeaderStyle(
              titleCentered: true,
              titleTextFormatter: (date, locale) => DateFormat.yMMM(locale).format(date),
              formatButtonVisible: false,
              titleTextStyle: TextStyle(fontSize: MediaQuery.of(context).size.width*0.007)
            ),
          shouldFillViewport: true,
          rowHeight:MediaQuery.of(context).size.height*0.02,
          firstDay: DateTime.utc(2010, 10, 16),
          lastDay: DateTime.utc(2030, 3, 14),
          focusedDay: DateTime.now(),
          onDaySelected: (selectedDay, focusedDay) {
            if (!isSameDay(_selectedDay, selectedDay)) {
              // Call `setState()` when updating the selected day
              setState(() {
                _selectedDay = selectedDay;
                _focusedDay = focusedDay;
              });
            }
          }
            ),
        ),