Added custom view for month header (#32)

* feat/added custom view for month header * feat/added example Co-authored-by: Andrii Davydenko <[email protected]>
mduccc · Mar 1, 2022 · b1ade63 · b1ade63
1 parent 5d71783
commit b1ade63
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_calendar_week/flutter_calendar_week.dart';
+import 'package:intl/intl.dart';
 
 void main() => runApp(MyApp());
 
@@ -61,6 +62,18 @@ class _HomePageState extends State<HomePage> {
                 onWeekChanged: () {
                   // Do something
                 },
+                monthViewBuilder: (DateTime time) => Align(
+                  alignment: FractionalOffset.center,
+                  child: Container(
+                      margin: const EdgeInsets.symmetric(vertical: 4),
+                      child: Text(
+                        DateFormat.yMMMM().format(time),
+                        overflow: TextOverflow.ellipsis,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                            color: Colors.blue, fontWeight: FontWeight.w600),
+                      )),
+                ),
                 decorations: [
                   DecorationItem(
                       decorationAlignment: FractionalOffset.bottomRight,

diff --git a/lib/src/calendar_week.dart b/lib/src/calendar_week.dart
@@ -34,6 +34,7 @@ Example:
                 onWeekChanged: () {
                   // Do something
                 },
+                monthViewBuilder: (date) => Text(date.toString()),
                 decorations: [
                   DecorationItem(
                       decorationAlignment: FractionalOffset.bottomRight,
@@ -110,7 +111,7 @@ class CalendarWeek extends StatefulWidget {
   final DateTime maxDate;
 
   /// Style of months
-  final TextStyle monthStyle;
+  final Widget Function(DateTime)? monthViewBuilder;
 
   /// Style of day of week
   final TextStyle dayOfWeekStyle;
@@ -186,7 +187,7 @@ class CalendarWeek extends StatefulWidget {
       this.maxDate,
       this.minDate,
       this.height,
-      this.monthStyle,
+      this.monthViewBuilder,
       this.dayOfWeekStyle,
       this.monthAlignment,
       this.dateStyle,
@@ -219,8 +220,7 @@ class CalendarWeek extends StatefulWidget {
           DateTime? maxDate,
           DateTime? minDate,
           double height = 100,
-          TextStyle monthStyle =
-              const TextStyle(color: Colors.blue, fontWeight: FontWeight.w600),
+          Widget Function(DateTime)? monthViewBuilder,
           TextStyle dayOfWeekStyle =
               const TextStyle(color: Colors.blue, fontWeight: FontWeight.w600),
           FractionalOffset monthAlignment = FractionalOffset.center,
@@ -253,7 +253,7 @@ class CalendarWeek extends StatefulWidget {
           maxDate ?? DateTime.now().add(Duration(days: 180)),
           minDate ?? DateTime.now().add(Duration(days: -180)),
           height,
-          monthStyle,
+          monthViewBuilder,
           dayOfWeekStyle,
           monthAlignment,
           dateStyle,
@@ -351,7 +351,12 @@ class _CalendarWeekState extends State<CalendarWeek> {
         mainAxisAlignment: MainAxisAlignment.start,
         children: <Widget>[
           // Month
-          widget.monthDisplay ? _monthItem(weeks.month) : Container(),
+          (widget.monthDisplay &&
+                  widget.monthViewBuilder != null &&
+                  weeks.days.firstWhere((el) => el != null) != null)
+              ? widget
+                  .monthViewBuilder!(weeks.days.firstWhere((el) => el != null)!)
+              : _monthItem(weeks.month),
 
           /// Day of week layout
           _dayOfWeek(weeks.dayOfWeek),
@@ -368,7 +373,7 @@ class _CalendarWeekState extends State<CalendarWeek> {
             margin: widget.marginMonth,
             child: Text(
               title,
-              style: widget.monthStyle,
+              style: TextStyle(color: Colors.blue, fontWeight: FontWeight.w600),
               overflow: TextOverflow.ellipsis,
               textAlign: TextAlign.center,
             )),

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -12,6 +12,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  intl: ^0.17.0
 
 dev_dependencies:
   flutter_test: