Home > Back-end >  how to style text in the table calendar
how to style text in the table calendar

Time:10-21

the result i want enter image description here

reality enter image description here

TableCalendar => table_calendar: ^3.0.6

my code :

headerStyle: HeaderStyle(
    formatButtonDecoration: BoxDecoration(
      border: Border.all(color: Colors.blueAccent, width: 10),
      borderRadius: BorderRadius.circular(12),
    ),
    titleTextStyle: const TextStyle(
      fontFamily: 'Poppins',
      fontWeight: FontWeight.w500,
      color: Color(0XFF1F2024),
      fontSize: 20,
    ),
    titleTextFormatter: (date, locale) {
      final month = DateFormat.MMMM(locale).format(date);
      final years = DateFormat.y(locale).format(date);
      return '$month\n$years';
    },
  ),
);

CodePudding user response:

You can use calendarBuilders to achieve that one

CalendarBuilders(headerTitleBuilder: (context, day) { 
  // add your code here 
})

and in TableCalendar

 TableCalendar(calendarBuilders: _calendarBuilders);
  • Related