✨ 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)

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(