TableCalendar

The table_calendar package provides two primary ways to customize the calendar's appearance:

1. Custom Styles: A low-effort way to achieve polished results by modifying existing visual properties.
2. Custom Builders: A high-control method that allows for full UI customization. Builders should typically be used in conjunction with custom Styles to achieve complete control over the calendar's layout and components.

For detailed implementation details, refer to the official API docs.

The TableCalendar widget requires three mandatory properties to define its date boundaries and initial view:

• firstDay: The earliest date the user can access.
• lastDay: The latest date the user can access.
• focusedDay: The currently targeted day, which determines which month is visible.

Note: To prevent the calendar from resetting to the initial focusedDay during hot reloads or rebuilds, you must store and update the focusedDay value using the onPageChanged callback.

TableCalendar(
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.utc(2030, 3, 14),
  focusedDay: DateTime.now(),
);

To customize the iOS launch screen, you can either replace the image files directly in the example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a visual approach.

Using Xcode:

1. Open your Flutter project's iOS workspace using open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, select Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog.

Use the calendarBuilders property to override specific parts of the calendar UI with your own widgets. Each builder allows you to selectively target elements (like day labels, week day labels, etc.). If a builder returns null, the default style for that element is used.

calendarBuilders: CalendarBuilders(
  dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);

      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
    return null; // Use default for other days
  },
),

Add table_calendar to your pubspec.yaml dependencies to use the widget in your Flutter project.

dependencies:
  table_calendar: ^3.2.0

To support different languages, follow these steps:

1. Initialize Formatting: Add the intl package and call initializeDateFormatting() in your main() function.
2. Set Locale: Pass a locale string (e.g., 'pl_PL', 'fr_FR') to the locale property of TableCalendar.

Note on FormatButton: If you use the built-in FormatButton, you must manually translate its text by providing translated strings to the availableCalendarFormats property. Alternatively, hide the button using formatButtonVisible: false.

// 1. Initialization in main.dart
import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

// 2. Usage in widget
TableCalendar(
  locale: 'pl_PL',
);

To show events on specific days, use the eventLoader property. This callback provides a DateTime object for each day, and you must return a list of events associated with that day.

Best Practice for Date Matching: Since DateTime objects include time components, using them as keys in a standard Map can lead to mismatches. It is recommended to use a LinkedHashMap with a custom equals implementation using isSameDay to ensure events are correctly retrieved regardless of the time part.

// Basic implementation
eventLoader: (day) {
  return _getEventsForDay(day);
},

// Example helper
List<Event> _getEventsForDay(DateTime day) {
  return events[day] ?? [];
}

// Recommended Map setup for DateTime keys
final events = LinkedHashMap(
  equals: isSameDay,
  hashCode: getHashCode,
)..addAll(eventSource);

You can implement repeating patterns (like weekly events) by adding logic directly inside the eventLoader callback.

eventLoader: (day) {
  if (day.weekday == DateTime.monday) {
    return [Event('Cyclic event')];
  }

  return [];
},

The dayTextFormatter property in CalendarStyle allows you to change how the day number is displayed within the cell. It accepts a TextFormatter function which takes the DateTime and the locale string.

Example usage:

CalendarStyle(
  dayTextFormatter: (date, locale) => DateFormat.d(locale).format(date),
)

// Example usage:
// dayTextFormatter: (date, locale) => DateFormat.d(locale).format(date),