feat:✨ Add theme support for multi day view

Author: ujas-m-simformsolutions

example/lib/main.dart

@@ -25,15 +25,18 @@ class _MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
     return CalendarThemeProvider(
-      calendarTheme: CalendarTheme(
+      calendarTheme: CalendarThemeData(
         monthViewTheme:
-            isDarkMode ? MonthViewTheme.dark() : MonthViewTheme.light(),
+            isDarkMode ? MonthViewThemeData.dark() : MonthViewThemeData.light(),
         dayViewTheme: isDarkMode
-            ? DayViewTheme.dark()
-            : DayViewTheme.light().copyWith(hourLineColor: AppColors.primary)
-                as DayViewTheme,
+            ? DayViewThemeData.dark()
+            : DayViewThemeData.light()
+                .copyWith(hourLineColor: AppColors.primary) as DayViewThemeData,
         weekViewTheme:
-            isDarkMode ? WeekViewTheme.dark() : WeekViewTheme.light(),
+            isDarkMode ? WeekViewThemeData.dark() : WeekViewThemeData.light(),
+        multiDayViewTheme: isDarkMode
+            ? MultiDayViewThemeData.dark()
+            : MultiDayViewThemeData.light(),
       ),
       child: CalendarControllerProvider(
         controller: EventController()..addAll(_events),

example/lib/theme/app_theme.dart

@@ -48,14 +48,16 @@ class AppTheme {
   );
 
   // Light colors
-  static final _dayViewTheme = DayViewTheme.light();
-  static final _weekViewTheme = WeekViewTheme.light();
+  static final _dayViewTheme = DayViewThemeData.light();
+  static final _weekViewTheme = WeekViewThemeData.light();
+  static final _multiDayViewTheme = MultiDayViewThemeData.light();
 
   // Dark colors
   static final _appDarkTheme = AppThemeExtension.dark();
-  static final _monthViewDarkTheme = MonthViewTheme.dark();
-  static final _dayViewDarkTheme = DayViewTheme.dark();
-  static final _weekViewDarkTheme = WeekViewTheme.dark();
+  static final _monthViewDarkTheme = MonthViewThemeData.dark();
+  static final _dayViewDarkTheme = DayViewThemeData.dark();
+  static final _weekViewDarkTheme = WeekViewThemeData.dark();
+  static final _multiDayViewDarkTheme = MultiDayViewThemeData.dark();
 
   // Light theme
   static final light = ThemeData.light().copyWith(
@@ -81,6 +83,7 @@ class AppTheme {
     extensions: [
       _dayViewTheme,
       _weekViewTheme,
+      _multiDayViewTheme,
     ],
   );
 
@@ -130,6 +133,7 @@ class AppTheme {
       _monthViewDarkTheme,
       _dayViewDarkTheme,
       _weekViewDarkTheme,
+      _multiDayViewDarkTheme,
     ],
   );
 }

example/lib/widgets/add_event_form.dart

@@ -103,7 +103,7 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
               Text(
                 'Recurring Event',
                 style: TextStyle(
-                  color: AppColors.black,
+                  color: color.surface,
                   fontSize: 16,
                 ),
               ),
@@ -128,7 +128,7 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
                     }
                   });
                 },
-                activeColor: Colors.blue,
+                activeColor: color.surface,
               ),
             ],
           ),
@@ -205,10 +205,10 @@ class _AddOrEditEventFormState extends State<AddOrEditEventForm> {
                       updateWeekdaysSelection();
                     }
 
-                          if (mounted) {
-                            setState(() {});
-                          }
-                        },
+                    if (mounted) {
+                      setState(() {});
+                    }
+                  },
                   validator: (value) {
                     if (value == null || value == "") {
                       return "Please select end date.";

lib/calendar_view.dart

@@ -17,10 +17,11 @@ export './src/extensions.dart' hide BuildContextExtension;
 export './src/modals.dart';
 export './src/month_view/month_view.dart';
 export './src/style/header_style.dart';
-export './src/theme/calendar_theme.dart';
-export './src/theme/day_view_theme.dart';
-export './src/theme/month_view_theme.dart';
-export './src/theme/week_view_theme.dart';
+export './src/theme/calendar_theme_data.dart';
+export './src/theme/day_view_theme_data.dart';
+export './src/theme/month_view_theme_data.dart';
+export './src/theme/week_view_theme_data.dart';
+export './src/theme/multi_day_view_theme_data.dart';
 export './src/typedefs.dart';
 export './src/week_view/week_view.dart';
 export './src/multi_day_view/multi_day_view.dart';

lib/src/calendar_theme_provider.dart

@@ -14,7 +14,7 @@ class CalendarThemeProvider extends InheritedWidget {
   }) : super(key: key, child: child);
 
   /// Theme for Calendar views.
-  final CalendarTheme calendarTheme;
+  final CalendarThemeData calendarTheme;
 
   static CalendarThemeProvider of(BuildContext context) {
     final result =

lib/src/components/headers/month_page_header.dart

@@ -22,8 +22,7 @@ class MonthPageHeader extends CalendarPageHeader {
     Color backgroundColor = Constants.headerBackground,
     StringProvider? dateStringBuilder,
     required DateTime date,
-    HeaderStyle headerStyle =
-        const HeaderStyle(),
+    HeaderStyle headerStyle = const HeaderStyle(),
   }) : super(
           key: key,
           date: date,

lib/src/components/month_view_components.dart

@@ -236,7 +236,7 @@ class FilledCell<T extends Object?> extends StatelessWidget {
   }
 }
 
-class WeekDayTile extends StatelessWidget {
+class WeekDayTile extends StatefulWidget {
   /// Index of week day.
   final int dayIndex;
 
@@ -265,6 +265,11 @@ class WeekDayTile extends StatelessWidget {
     this.weekDayStringBuilder,
   }) : super(key: key);
 
+  @override
+  State<WeekDayTile> createState() => _WeekDayTileState();
+}
+
+class _WeekDayTileState extends State<WeekDayTile> {
   @override
   Widget build(BuildContext context) {
     final themeColors = context.monthViewColors;
@@ -274,17 +279,18 @@ class WeekDayTile extends StatelessWidget {
       margin: EdgeInsets.zero,
       padding: EdgeInsets.symmetric(vertical: 10.0),
       decoration: BoxDecoration(
-        color: backgroundColor ?? themeColors.weekDayTileColor,
-        border: displayBorder
+        color: widget.backgroundColor ?? themeColors.weekDayTileColor,
+        border: widget.displayBorder
             ? Border.all(
-                color: borderColor ?? themeColors.weekDayBorderColor,
+                color: widget.borderColor ?? themeColors.weekDayBorderColor,
                 width: 0.5,
               )
             : null,
       ),
       child: Text(
-        weekDayStringBuilder?.call(dayIndex) ?? Constants.weekTitles[dayIndex],
-        style: textStyle ??
+        widget.weekDayStringBuilder?.call(widget.dayIndex) ??
+            Constants.weekTitles[widget.dayIndex],
+        style: widget.textStyle ??
             TextStyle(
               fontSize: 17,
               fontWeight: FontWeight.w500,

lib/src/day_view/day_view.dart

@@ -662,7 +662,7 @@ class DayViewState<T extends Object?> extends State<DayView<T>> {
   /// Default timeline builder this builder will be used if
   /// [widget.eventTileBuilder] is null
   ///
-  Widget _defaultTimeLineBuilder(date) => DefaultTimeLineMark(
+  Widget _defaultTimeLineBuilder(DateTime date) => DefaultTimeLineMark(
         date: date,
         timeStringBuilder: widget.timeStringBuilder,
         markingStyle: TextStyle(

lib/src/extensions.dart

@@ -319,12 +319,45 @@ extension NullableCallback3<A, B, C> on void Function(A, B, C)? {
 }
 
 extension BuildContextExtension on BuildContext {
-  MonthViewTheme get monthViewColors =>
-      Theme.of(this).extension<MonthViewTheme>() ?? MonthViewTheme.light();
+  /// Get [MonthViewThemeData] from theme, if null returns light theme.
+  /// [MonthViewThemeData] needs to be added in [MaterialApp] theme extensions
+  /// to get theme data with this type.
+  MonthViewThemeData get monthViewColors =>
+      Theme.of(this).extension<MonthViewThemeData>() ??
+      MonthViewThemeData.light();
+
+  /// Get [DayViewThemeData] from theme, if null returns light theme.
+  /// [DayViewThemeData] needs to be added in [MaterialApp] theme extensions
+  /// to get theme data with this type.
+  DayViewThemeData get dayViewColors =>
+      Theme.of(this).extension<DayViewThemeData>() ?? DayViewThemeData.light();
+
+  /// Get [WeekViewThemeData] from theme, if null returns light theme.
+  /// [WeekViewThemeData] needs to be added in [MaterialApp] theme extensions
+  /// to get theme data with this type.
+  WeekViewThemeData get weekViewColors =>
+      Theme.of(this).extension<WeekViewThemeData>() ??
+      WeekViewThemeData.light();
+
+  /// Get [MultiDayViewThemeData] from theme, if null returns light theme.
+  /// [MultiDayViewThemeData] needs to be added in [MaterialApp] theme extensions
+  /// to get theme data with this type.
+  MultiDayViewThemeData get multiDayViewColors =>
+      Theme.of(this).extension<MultiDayViewThemeData>() ??
+      MultiDayViewThemeData.light();
+}
 
-  DayViewTheme get dayViewColors =>
-      Theme.of(this).extension<DayViewTheme>() ?? DayViewTheme.light();
+extension BuildContextMultiDayViewThemeExtension on BuildContext {
+  /// Get MultiDayViewTheme from Theme
+  MultiDayViewThemeData get multiDayViewTheme {
+    final theme = Theme.of(this).extension<MultiDayViewThemeData>();
+    if (theme != null) {
+      return theme;
+    }
 
-  WeekViewTheme get weekViewColors =>
-      Theme.of(this).extension<WeekViewTheme>() ?? WeekViewTheme.light();
+    // If no theme extension is available, return based on brightness
+    return Theme.of(this).brightness == Brightness.dark
+        ? MultiDayViewThemeData.dark()
+        : MultiDayViewThemeData.light();
+  }
 }

lib/src/modals.dart

@@ -53,7 +53,7 @@ class LiveTimeIndicatorSettings {
   /// Flag to show time on live time line.
   final bool showTime;
 
-  /// Flag to show time backgroud view.
+  /// Flag to show time background view.
   final bool showTimeBackgroundView;
 
   /// Radius of bullet.