calendar_view

To ensure that DayView, WeekView, MonthView, and MultiDayView stay in sync (e.g., when an event is added or changed), you must use a single shared EventController<T>. There are two ways to achieve this:

Option 1: Direct Controller Injection

Pass the same instance of EventController to the controller parameter of each view.

Option 2: Using CalendarControllerProvider

Wrap your application (or the relevant part of the widget tree) with CalendarControllerProvider. Any calendar view inside this provider that does not explicitly receive a controller will automatically read it from the provider.

// Option 1: Direct injection
final controller = EventController();

MonthView(controller: controller);
WeekView(controller: controller);
DayView(controller: controller);
MultiDayView(controller: controller);

// Option 2: Using Provider
CalendarControllerProvider(
  controller: EventController(),
  child: MaterialApp(
    home: const CalendarScreen(),
  ),
);

When upgrading to version 2.x.x, note that breaking changes may occur. It is recommended to pin your version in pubspec.yaml instead of using the caret (^) symbol.

1. Migrate HeaderStyle

leftIconVisible and rightIconVisible have been removed. To hide an icon, set its corresponding leftIconConfig or rightIconConfig to null.

2. Migrate Page Builders (CalendarPageHeader, DayPageHeader, etc.)

Instead of passing individual properties like backgroundColor or iconColor to the builder, use the headerStyle property with HeaderStyle.withSameIcons().

3. Migrate CellBuilder signature

A new isSelected parameter has been added to the CellBuilder typedef.

# Recommended dependency pinning for 2.x.x
dependencies:
  calendar_view: 2.0.0

// New CellBuilder signature
typedef CellBuilder<T extends Object?> = Widget Function(
  DateTime date,
  List<CalendarEventData<T>> event,
  bool isToday,
  bool isInMonth,
  bool isSelected, // New parameter
  bool hideDaysNotInMonth,
);

To customize the MonthView without a full theme override, use monthViewThemeSettings. For complete control over how individual date cells are rendered, use monthViewBuilders.cellBuilder.

Key customization options:

• monthViewThemeSettings: Adjust selectedHighlightColor, selectedTitleColor, cellsInMonthHighlightColor, and weekDayTextStyle.
• monthViewBuilders.cellBuilder: A builder function that provides context for each cell, including date, events, isToday, isInMonth, isSelected, and hideDaysNotInMonth.

MonthView(
  monthViewThemeSettings: MonthViewThemeSettings(
    selectedHighlightColor: Colors.blue,
    selectedTitleColor: Colors.white,
    cellsInMonthHighlightColor: Colors.blue,
    weekDayTextStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
  ),
  monthViewBuilders: MonthViewBuilders(
    cellBuilder: (date, events, isToday, isInMonth, isSelected, hideDaysNotInMonth) {
      return Container(
        decoration: BoxDecoration(
          color: isInMonth ? Colors.white : Colors.grey[200],
          border: Border.all(color: Colors.blue),
        ),
        child: Center(
          child: Text(
            date.day.toString(),
            style: TextStyle(
              color: isSelected ? Colors.white : (isToday ? Colors.red : Colors.black),
              fontWeight: (isToday || isSelected) ? FontWeight.bold : FontWeight.normal,
            ),
          ),
        ),
      );
    },
  ),
)

The WeekView offers several granular customization points:

• Weekdays & Numbers: Use weekNumberBuilder and weekDayBuilder.
• Weekday Tiles: Override weekDayTileColor (from WeekViewThemeData) using weekTitleBackgroundColor per-widget.
• Background: Override pageBackgroundColor (from WeekViewThemeData) using backgroundColor per-widget.
• Timeline: Use timelineTextColor in WeekViewThemeData. Use markingStyle in DefaultTimeLineMark for text style, or timeLineBuilder to replace the timeline entirely.
• Time Lines: Customize hourIndicatorSettings, halfHourIndicatorSettings, and quarterHourIndicatorSettings per-widget.
• Dividers: Use dividerSettings to customize the divider between weekdays and full-day events. Use DividerSettings.none() to hide it.

// Example: Customizing WeekView indicators and dividers
weekView( // Assuming WeekView usage
  hourIndicatorSettings: HourIndicatorSettings(
    color: Colors.greenAccent,
    lineStyle: LineStyle.dashed,
  ),
  showHalfHours: true,
  halfHourIndicatorSettings: HourIndicatorSettings(
    color: Colors.redAccent,
    lineStyle: LineStyle.dashed,
  ),
  dividerSettings: DividerSettings(
    thickness: 2,
    height: 2,
    color: Colors.blueAccent,
    indent: 10,
    endIndent: 10,
  ),
);

// To hide divider:
// dividerSettings: DividerSettings.none(),

You can customize the appearance of MonthView, DayView, WeekView, and MultiDayView using two primary approaches:

1. Using CalendarThemeProvider (Recommended): Wrap your application (or a specific subtree) with CalendarThemeProvider and provide a CalendarThemeData object containing specific theme data for each view type.

2. Using ThemeData extensions: Since all theme data classes extend ThemeExtension, you can add them directly to your app's ThemeData.extensions list.

// Approach 1: CalendarThemeProvider
CalendarThemeProvider(
  calendarTheme: CalendarThemeData(
    monthViewTheme: MonthViewThemeData.light().copyWith(
      cellInMonthColor: Colors.blue.shade50,
      cellBorderColor: Colors.blue.shade300,
    ),
    dayViewTheme: DayViewThemeData.light(),
    weekViewTheme: WeekViewThemeData.light(),
    multiDayViewTheme: MultiDayViewThemeData.light(),
  ),
  child: YourApp(),
)

// Approach 2: ThemeData extensions
final myMonthViewTheme = MonthViewThemeData.light().copyWith(
  cellInMonthColor: Colors.blue.shade50,
  cellBorderColor: Colors.blue.shade300,
);

final theme = ThemeData.light().copyWith(
  extensions: [
    myMonthViewTheme,
    DayViewThemeData.light(),
    WeekViewThemeData.light(),
    MultiDayViewThemeData.light(),
  ],
);