feat: add resizable month view with customizable display modes and themes

Author: kavantrivedi

CHANGELOG.md

@@ -1,5 +1,7 @@
 # [Unreleased - 11 May 2026]
 
+- Added `ResizableMonthView`, a new highly customizable month view with dynamic modes (Full, Compact, Minimal) and built-in event list.
+- Added `ResizableMonthViewThemeData` and related theme configurations for styling the new view.
 - Fixed `MonthViewBuilder` to be generic for improved type safety in `MonthView`. [#524](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/524)
 - Added `DividerSettings` to customize the dividers in `WeekView` and `MultiDayView`. [#374](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/374), [#430](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/430), [#498](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/498)
 - Added `timeSlotColorBuilder` in `DayView` and `WeekView` to customize background color. [#470](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/470)

README.md

@@ -33,6 +33,7 @@ dependencies:
 
 - Multiple calendar view options:
     - Month View
+    - Resizable Month View
     - Day View
     - Week View
 - Highly customisable UI components

example/lib/enumerations.dart

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

example/lib/extension.dart

@@ -125,7 +125,12 @@ extension StringExt on String {
 }
 
 extension ViewNameExt on CalendarView {
-  String get name => toString().split(".").last;
+  String get name => switch (this) {
+    CalendarView.month => 'month',
+    CalendarView.day => 'day',
+    CalendarView.week => 'week',
+    CalendarView.resizableMonth => 'resizableMonth',
+  };
 }
 
 extension BuildContextExtension on BuildContext {

example/lib/l10n/app_ar.arb

@@ -6,6 +6,7 @@
   "dayView": "عرض يومي",
   "weekView": "عرض أسبوعي",
   "multidayView": "عرض متعدد الأيام",
+  "resizableMonthView": "عرض شهري قابل للتغيير",
   "appTitle": "مثال صفحة تقويم فلاتر",
   "projectMeetingTitle": "اجتماع المشروع",
   "projectMeetingDesc": "اليوم هو اجتماع المشروع.",

example/lib/l10n/app_en.arb

@@ -6,6 +6,7 @@
   "dayView": "Day View",
   "weekView": "Week View",
   "multidayView": "Multi-Day View",
+  "resizableMonthView": "Resizable Month View",
   "appTitle": "Flutter Calendar Page Demo",
   "projectMeetingTitle": "Project meeting",
   "projectMeetingDesc": "Today is project meeting.",

example/lib/l10n/app_es.arb

@@ -6,6 +6,7 @@
   "dayView": "Vista Diaria",
   "weekView": "Vista Semanal",
   "multidayView": "Vista de Varios Días",
+  "resizableMonthView": "Vista Mensual Redimensionable",
   "appTitle": "Demo de Página de Calendario Flutter",
   "projectMeetingTitle": "Reunión del proyecto",
   "projectMeetingDesc": "Hoy hay reunión del proyecto.",

example/lib/main.dart

@@ -55,6 +55,9 @@ class _MyAppState extends State<MyApp> {
               multiDayViewTheme: isDarkMode
                   ? MultiDayViewThemeData.dark()
                   : MultiDayViewThemeData.light(),
+              resizableMonthViewTheme: isDarkMode
+                  ? ResizableMonthViewThemeData.dark()
+                  : ResizableMonthViewThemeData.light(),
             ),
             child: CalendarControllerProvider(
               controller: EventController(),

example/lib/pages/mobile/mobile_home_page.dart

@@ -5,6 +5,7 @@ import '../../localization/locale_controller.dart';
 import '../day_view_page.dart';
 import '../month_view_page.dart';
 import '../multi_day_view_page.dart';
+import '../resizable_month_view_page.dart';
 import '../week_view_page.dart';
 
 class MobileHomePage extends StatefulWidget {
@@ -107,6 +108,11 @@ class _MobileHomePageState extends State<MobileHomePage> {
               child: Text(translate.monthView),
             ),
             SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () => context.pushRoute(ResizableMonthViewPageDemo()),
+              child: Text(translate.resizableMonthView),
+            ),
+            SizedBox(height: 20),
             ElevatedButton(
               onPressed: () => context.pushRoute(DayViewPageDemo()),
               child: Text(translate.dayView),

example/lib/pages/resizable_month_view_page.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import '../extension.dart';
+import '../widgets/resizable_month_view_widget.dart';
+import '../widgets/responsive_widget.dart';
+import 'create_event_page.dart';
+import 'web/web_home_page.dart';
+import '../enumerations.dart';
+
+/// Full-screen demo page for [ResizableMonthViewWidget].
+///
+/// On mobile it renders a [Scaffold] with an AppBar and a FAB to create
+/// events. On web/desktop it delegates to [WebHomePage] with the
+/// [CalendarView.resizableMonth] view pre-selected.
+class ResizableMonthViewPageDemo extends StatefulWidget {
+  const ResizableMonthViewPageDemo({super.key});
+
+  @override
+  State<ResizableMonthViewPageDemo> createState() =>
+      _ResizableMonthViewPageDemoState();
+}
+
+class _ResizableMonthViewPageDemoState
+    extends State<ResizableMonthViewPageDemo> {
+  @override
+  Widget build(BuildContext context) {
+    final appColors = context.appColors;
+
+    return ResponsiveWidget(
+      webWidget: WebHomePage(selectedView: CalendarView.resizableMonth),
+      mobileWidget: Scaffold(
+        primary: false,
+        appBar: AppBar(leading: const SizedBox.shrink()),
+        floatingActionButton: FloatingActionButton(
+          heroTag: 'add_event_resizable_month_view',
+          child: Icon(Icons.add, color: appColors.onPrimary),
+          elevation: 8,
+          onPressed: () => context.pushRoute(CreateEventPage()),
+        ),
+        body: ResizableMonthViewWidget(),
+      ),
+    );
+  }
+}