✨ Add MultiDay View option to web example

Author: lavigarg-simform

CHANGELOG.md

@@ -1,3 +1,7 @@
+# [Unreleased- 26 May 2026]
+
+- Added `weekTitleBackgroundColor` to `MultiDayView` to customize the week title background color.
+
 # [Unreleased - 11 May 2026]
 
 - Fixed `MonthViewBuilder` to be generic for improved type safety in `MonthView`. [#524](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/524)

doc/documentation.md

@@ -476,6 +476,7 @@ MultiDayView(
     // Multi-day configuration
     daysInView: 3, // Number of days to display (default is 3)
     weekTitleHeight: 50, // Height of week day title
+    weekTitleBackgroundColor: Colors.grey.shade200, // Background color of week title
     showVerticalLines: true, // Show the vertical line between days
     showWeekDayAtBottom: false, // Show week day at bottom position
     showLiveTimeLineInAllDays: true, // Display live time line in all pages
@@ -1051,6 +1052,45 @@ MonthView(
 * Use `monthViewStyle.showWeekTileBorder` to control week day title border visibility
 * Use `monthViewBuilders.headerBuilder` to customize or completely replace the month header
 
+### MultiDay View
+* To customise week number & weekdays use `weekNumberBuilder` & `weekDayBuilder`.
+* Default week day tile color is `multiDayTileColor` in `MultiDayViewThemeData` (defaults to `surfaceContainerHigh`).
+    * Use `weekTitleBackgroundColor` to override it per-widget.
+* Default page background color is `pageBackgroundColor` in `MultiDayViewThemeData` (defaults to `surfaceContainerLowest`).
+    * Use `backgroundColor` to override it per-widget.
+* Default timeline text color is `timelineTextColor` in `MultiDayViewThemeData` (defaults to `onSurface`).
+    * Use `markingStyle` in `DefaultTimeLineMark` to give text style, or `timeLineBuilder` to fully replace the timeline.
+* Default live time indicator color is `liveIndicatorColor` in `MultiDayViewThemeData` (defaults to `primary`).
+    * Use `liveTimeIndicatorSettings` to customise it per-widget.
+* Default hour/half hour/quarter hour line color is `hourLineColor` / `halfHourLineColor` / `quarterHourLineColor` in `MultiDayViewThemeData` (all default to `surfaceContainerHighest`).
+    * Use `hourIndicatorSettings`, `halfHourIndicatorSettings`, and `quarterHourIndicatorSettings` to customise per-widget.
+* Default vertical line color between days is `verticalLinesColor` in `MultiDayViewThemeData`.
+* To customise the divider between weekdays and full-day events use `dividerSettings`.
+
+```dart
+  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,
+      ),
+```
+
+Hide divider in multiday view.
+```dart
+  dividerSettings: DividerSettings.none(),
+```
+
 # Migration Guides
 
 ## Migrate from `1.x.x` to latest

example/lib/enumerations.dart

@@ -1 +1 @@
-enum CalendarView { month, day, week }
+enum CalendarView { month, day, week, multiday }

example/lib/widgets/calendar_configs.dart

@@ -126,6 +126,9 @@ class _CalendarConfigState extends State<CalendarConfig> {
                       case CalendarView.week:
                         viewName = translate.weekView;
                         break;
+                      case CalendarView.multiday:
+                        viewName = translate.multidayView;
+                        break;
                     }
                     return GestureDetector(
                       onTap: () => widget.onViewChange(view),

example/lib/widgets/calendar_views.dart

@@ -6,6 +6,7 @@ import '../enumerations.dart';
 import '../theme/app_colors.dart';
 import 'day_view_widget.dart';
 import 'month_view_widget.dart';
+import 'multi_day_view_widget.dart';
 import 'week_view_widget.dart';
 
 class CalendarViews extends StatelessWidget {
@@ -29,7 +30,9 @@ class CalendarViews extends StatelessWidget {
             ? MonthViewWidget(width: width)
             : view == CalendarView.day
             ? DayViewWidget(width: width)
-            : WeekViewWidget(width: width),
+            : view == CalendarView.week
+            ? WeekViewWidget(width: width)
+            : MultiDayViewWidget(width: width),
       ),
     );
   }

example/lib/widgets/multi_day_view_widget.dart

@@ -16,7 +16,7 @@ class MultiDayViewWidget extends StatelessWidget {
       daysInView: 3,
       width: width,
       showLiveTimeLineInAllDays: true,
-      eventArranger: SideEventArranger(maxWidth: 30),
+      eventArranger: SideEventArranger(),
       timeLineWidth: 65,
       scrollPhysics: const BouncingScrollPhysics(),
       liveTimeIndicatorSettings: LiveTimeIndicatorSettings(

lib/src/calendar_event_data.dart

@@ -6,9 +6,8 @@ import 'package:flutter/material.dart';
 
 import '../calendar_view.dart';
 
-@immutable
-
 /// Stores metadata for a calendar event and its date/time boundaries.
+@immutable
 class CalendarEventData<T extends Object?> {
   /// Specifies date on which all these events are.
   final DateTime date;
@@ -112,10 +111,10 @@ class CalendarEventData<T extends Object?> {
   /// [currentDate] or not.
   ///
   bool occursOnDate(DateTime currentDate) {
-    return currentDate == date ||
-        currentDate == endDate ||
-        (currentDate.isBefore(endDate.withoutTime) &&
-            currentDate.isAfter(date.withoutTime));
+    return currentDate.compareWithoutTime(date) ||
+        currentDate.compareWithoutTime(endDate) ||
+        (currentDate.withoutTime.isBefore(endDate) &&
+            currentDate.withoutTime.isAfter(date));
   }
 
   /// Returns event data in [Map<String, dynamic>] format.

lib/src/multi_day_view/_internal_multi_day_view_page.dart

@@ -91,6 +91,9 @@ class InternalMultiDayViewPage<T extends Object?> extends StatefulWidget {
   /// Height of week title.
   final double weekTitleHeight;
 
+  /// Background color of week title
+  final Color? weekTitleBackgroundColor;
+
   /// Width of week title.
   final double weekTitleWidth;
 
@@ -174,59 +177,64 @@ class InternalMultiDayViewPage<T extends Object?> extends StatefulWidget {
   /// This method will be called when user taps on timestamp in timeline.
   final TimestampCallback? onTimestampTap;
 
+  /// Background color of the calendar page.
+  final Color? backgroundColor;
+
   /// A single page for week view.
-  const InternalMultiDayViewPage(
-      {Key? key,
-      required this.showVerticalLine,
-      required this.weekTitleHeight,
-      required this.weekDayBuilder,
-      required this.weekNumberBuilder,
-      required this.width,
-      required this.dates,
-      required this.eventTileBuilder,
-      required this.controller,
-      required this.timeLineBuilder,
-      required this.hourIndicatorSettings,
-      required this.hourLinePainter,
-      required this.halfHourIndicatorSettings,
-      required this.quarterHourIndicatorSettings,
-      required this.dividerSettings,
-      required this.showLiveLine,
-      required this.liveTimeIndicatorSettings,
-      required this.heightPerMinute,
-      required this.timeLineWidth,
-      required this.timeLineOffset,
-      required this.height,
-      required this.hourHeight,
-      required this.eventArranger,
-      required this.verticalLineOffset,
-      required this.weekTitleWidth,
-      required this.onTileTap,
-      required this.onTileLongTap,
-      required this.onDateLongPress,
-      required this.onDateTap,
-      required this.weekDays,
-      required this.minuteSlotSize,
-      required this.scrollConfiguration,
-      required this.startHour,
-      required this.fullDayEventBuilder,
-      required this.weekDetectorBuilder,
-      required this.showWeekDayAtBottom,
-      required this.showHalfHours,
-      required this.showQuarterHours,
-      required this.emulateVerticalOffsetBy,
-      required this.onTileDoubleTap,
-      required this.endHour,
-      required this.onTimestampTap,
-      this.fullDayHeaderTitle = '',
-      required this.fullDayHeaderTextConfig,
-      required this.scrollPhysics,
-      required this.scrollListener,
-      required this.multiDayViewScrollController,
-      this.lastScrollOffset = 0.0,
-      this.keepScrollOffset = false,
-      this.showMutliDayBottomLine = true})
-      : super(key: key);
+  const InternalMultiDayViewPage({
+    Key? key,
+    required this.showVerticalLine,
+    required this.weekTitleHeight,
+    required this.weekDayBuilder,
+    required this.weekNumberBuilder,
+    required this.width,
+    required this.dates,
+    required this.eventTileBuilder,
+    required this.controller,
+    required this.timeLineBuilder,
+    required this.hourIndicatorSettings,
+    required this.hourLinePainter,
+    required this.halfHourIndicatorSettings,
+    required this.quarterHourIndicatorSettings,
+    required this.dividerSettings,
+    required this.showLiveLine,
+    required this.liveTimeIndicatorSettings,
+    required this.heightPerMinute,
+    required this.timeLineWidth,
+    required this.timeLineOffset,
+    required this.height,
+    required this.hourHeight,
+    required this.eventArranger,
+    required this.verticalLineOffset,
+    required this.weekTitleWidth,
+    required this.weekTitleBackgroundColor,
+    required this.onTileTap,
+    required this.onTileLongTap,
+    required this.onDateLongPress,
+    required this.onDateTap,
+    required this.weekDays,
+    required this.minuteSlotSize,
+    required this.scrollConfiguration,
+    required this.startHour,
+    required this.fullDayEventBuilder,
+    required this.weekDetectorBuilder,
+    required this.showWeekDayAtBottom,
+    required this.showHalfHours,
+    required this.showQuarterHours,
+    required this.emulateVerticalOffsetBy,
+    required this.onTileDoubleTap,
+    required this.endHour,
+    required this.onTimestampTap,
+    required this.fullDayHeaderTextConfig,
+    required this.scrollPhysics,
+    required this.scrollListener,
+    required this.multiDayViewScrollController,
+    this.backgroundColor,
+    this.fullDayHeaderTitle = '',
+    this.lastScrollOffset = 0.0,
+    this.keepScrollOffset = false,
+    this.showMutliDayBottomLine = true,
+  }) : super(key: key);
 
   @override
   _InternalMultiDayViewPageState<T> createState() =>
@@ -280,6 +288,7 @@ class _InternalMultiDayViewPageState<T extends Object?>
     final direction = Directionality.of(context);
 
     return Container(
+      color: widget.backgroundColor ?? themeColor.pageBackgroundColor,
       height: widget.height + widget.weekTitleHeight,
       width: widget.width,
       child: Column(
@@ -289,7 +298,8 @@ class _InternalMultiDayViewPageState<T extends Object?>
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
           ColoredBox(
-            color: themeColor.headerBackgroundColor,
+            color:
+                widget.weekTitleBackgroundColor ?? themeColor.multiDayTileColor,
             child: SizedBox(
               width: widget.width,
               child: Row(