Multiple days selection (#284)

* Added marked date class * Added multiple_marked_dates class * Renamed market_date to marked date * Added comments * Remover border color from marked date Co-authored-by: takunda <madechangu.takunda2gmail.com>
hyochan · Jul 29, 2021 · 90b96c3 · 90b96c3
1 parent c1338a8
commit 90b96c3
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 20 deletions.
diff --git a/lib/classes/marked_date.dart b/lib/classes/marked_date.dart
@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+class MarkedDate implements MarkedDateInterface {
+  final Color color;
+  final int? id;
+  final TextStyle? textStyle;
+  final DateTime date;
+
+  MarkedDate({
+    required this.color,
+    this.id,
+    this.textStyle,
+    required this.date,
+  });
+
+  @override
+  bool operator ==(dynamic other) {
+    return this.date == other.date &&
+        this.color == other.color &&
+        this.textStyle == other.textStyle &&
+        this.id == other.id;
+  }
+
+  @override
+  DateTime getDate() => this.date;
+
+  @override
+  int? getId() => this.id;
+
+  @override
+  Color getColor() => this.color;
+
+
+  @override
+  TextStyle? getTextStyle() => this.textStyle;
+}
+
+
+
+
+abstract class MarkedDateInterface {
+  DateTime getDate();
+  Color getColor();
+  int? getId();
+  TextStyle? getTextStyle();
+
+}
diff --git a/lib/classes/multiple_marked_dates.dart b/lib/classes/multiple_marked_dates.dart
@@ -0,0 +1,48 @@
+
+import 'marked_date.dart';
+import 'package:flutter/material.dart';
+
+class MultipleMarkedDates{
+  List<MarkedDate> markedDates;
+
+  MultipleMarkedDates({required this.markedDates});
+
+  void add(MarkedDate markedDate){
+      markedDates.add(markedDate);
+  }
+
+  void addAll(List<MarkedDate> markedDates){
+      this.markedDates.addAll(markedDates);
+  }
+
+  bool remove(MarkedDate markedDate){
+    return markedDates.remove(markedDate);
+  }
+
+  void clear() {
+    markedDates.clear();
+  }
+
+  bool isMarked(DateTime date){
+    final results = markedDates.firstWhere((element) => element.date == date, orElse: () => MarkedDate(color: Colors.black, date: DateTime(0)));
+    return results.date.year == date.year;
+  }
+
+  Color getColor(DateTime date){
+    final results = markedDates.firstWhere((element) => element.date == date, orElse: () => MarkedDate(color: Colors.black, date: DateTime(0)));
+    return results.color;
+  }
+
+  DateTime getDate(DateTime date){
+    final results = markedDates.firstWhere((element) => element.date == date, orElse: () => MarkedDate(color: Colors.black, date: DateTime(0)));
+    return results.date;
+  }
+
+  TextStyle? getTextStyle(DateTime date){
+    final results = markedDates.firstWhere((element) => element.date == date, orElse: () => MarkedDate(color: Colors.black, date: DateTime(0)));
+    return results.textStyle;
+  }
+
+
+
+}
diff --git a/lib/flutter_calendar_carousel.dart b/lib/flutter_calendar_carousel.dart
@@ -11,6 +11,8 @@ import 'package:flutter_calendar_carousel/src/weekday_row.dart';
 import 'package:intl/date_symbol_data_local.dart';
 import 'package:intl/intl.dart' show DateFormat;
 
+import 'classes/multiple_marked_dates.dart';
+
 export 'package:flutter_calendar_carousel/classes/event_list.dart';
 
 typedef MarkedDateIconBuilder<T> = Widget? Function(T event);
@@ -112,6 +114,7 @@ class CalendarCarousel<T extends EventInterface> extends StatefulWidget {
   final bool showWeekDays;
   final bool showHeader;
   final bool showHeaderButton;
+  final MultipleMarkedDates? multipleMarkedDates;
   final Widget? leftButtonIcon;
   final Widget? rightButtonIcon;
   final ScrollPhysics? customGridViewPhysics;
@@ -181,6 +184,7 @@ class CalendarCarousel<T extends EventInterface> extends StatefulWidget {
     this.markedDateCustomTextStyle,
     this.markedDateMoreCustomTextStyle,
     this.markedDateWidget,
+    this.multipleMarkedDates,
     this.headerMargin = const EdgeInsets.symmetric(vertical: 16.0),
     this.childAspectRatio = 1.0,
     this.weekDayMargin = const EdgeInsets.only(bottom: 4.0),
@@ -415,6 +419,9 @@ class _CalendarState<T extends EventInterface>
     bool isThisMonthDay,
     DateTime now,
   ) {
+
+
+
     return Container(
       width: double.infinity,
       height: double.infinity,
@@ -432,7 +439,8 @@ class _CalendarState<T extends EventInterface>
                 textStyle,
                 defaultTextStyle,
                 isNextMonthDay,
-                isThisMonthDay),
+                isThisMonthDay
+                ),
             child: Text(
               '${now.day}',
               semanticsLabel: now.day.toString(),
@@ -445,7 +453,8 @@ class _CalendarState<T extends EventInterface>
                   textStyle,
                   defaultTextStyle,
                   isNextMonthDay,
-                  isThisMonthDay),
+                  isThisMonthDay,
+                  now),
               maxLines: 1,
             ),
           ),
@@ -466,6 +475,13 @@ class _CalendarState<T extends EventInterface>
     bool isThisMonthDay,
     DateTime now,
   ) {
+
+    // If day is in Multiple selection mode, get its color
+    bool isMultipleMarked = widget.multipleMarkedDates?.isMarked(now) ?? false;
+    Color? multipleMarkedColor = widget.multipleMarkedDates?.getColor(now);
+
+
+
     final markedDatesMap = widget.markedDatesMap;
     return Container(
       margin: EdgeInsets.all(widget.dayPadding),
@@ -476,7 +492,12 @@ class _CalendarState<T extends EventInterface>
               ? widget.selectedDayButtonColor
               : isToday && widget.todayButtonColor != null
                   ? widget.todayButtonColor
-                  : widget.dayButtonColor,
+
+                  // If day is in Multiple selection mode, apply a different color
+                  : isMultipleMarked? 
+                      multipleMarkedColor
+                      : widget.dayButtonColor,
+
           onPressed: widget.disableDayPressed ? null : () => _onDayPressed(now),
           padding: EdgeInsets.all(widget.dayPadding),
           shape: widget.markedDateCustomShapeBorder != null &&
@@ -1080,23 +1101,25 @@ class _CalendarState<T extends EventInterface>
     bool isThisMonthDay,
   ) {
     return !isSelectable
-        ? defaultInactiveDaysTextStyle
-        : (_localeDate.dateSymbols.WEEKENDRANGE
-                    .contains((index - 1 + firstDayOfWeek) % 7)) &&
-                !isSelectedDay &&
-                !isToday
-            ? (isPrevMonthDay
-                ? defaultPrevDaysTextStyle
-                : isNextMonthDay
-                    ? defaultNextDaysTextStyle
-                    : isSelectable
-                        ? defaultWeekendTextStyle
-                        : defaultInactiveWeekendTextStyle)
-            : isToday
-                ? defaultTodayTextStyle
-                : isSelectable && textStyle != null
-                    ? textStyle
-                    : defaultTextStyle;
+        ?  
+          defaultInactiveDaysTextStyle
+            : (_localeDate.dateSymbols.WEEKENDRANGE
+                        .contains((index - 1 + firstDayOfWeek) % 7)) &&
+                    !isSelectedDay &&
+                    !isToday
+                ? (isPrevMonthDay
+                    ? defaultPrevDaysTextStyle
+                    : isNextMonthDay
+                        ? defaultNextDaysTextStyle
+                        : isSelectable
+                            ? defaultWeekendTextStyle
+                            : defaultInactiveWeekendTextStyle)
+                : 
+                isToday
+                    ? defaultTodayTextStyle
+                    : isSelectable && textStyle != null
+                        ? textStyle
+                        : defaultTextStyle;
   }
 
   TextStyle? getDayStyle(
@@ -1109,9 +1132,18 @@ class _CalendarState<T extends EventInterface>
     TextStyle defaultTextStyle,
     bool isNextMonthDay,
     bool isThisMonthDay,
+    DateTime now
   ) {
+
+    // If day is in multiple selection get its style(if available)
+    bool isMultipleMarked = widget.multipleMarkedDates?.isMarked(now) ?? false;
+    TextStyle? mutipleMarkedTextStyle = widget.multipleMarkedDates?.getTextStyle(now);
+
+
     return isSelectedDay && widget.selectedDayTextStyle != null
         ? widget.selectedDayTextStyle
+        : isMultipleMarked?
+            mutipleMarkedTextStyle
         : (_localeDate.dateSymbols.WEEKENDRANGE
                     .contains((index - 1 + firstDayOfWeek) % 7)) &&
                 !isSelectedDay &&
@@ -1144,6 +1176,8 @@ class _CalendarState<T extends EventInterface>
       DateTime now) {
     final customDayBuilder = widget.customDayBuilder;
 
+
+
     Widget? dayContainer;
     if (customDayBuilder != null) {
       final appTextStyle = DefaultTextStyle.of(context).style;
@@ -1158,6 +1192,7 @@ class _CalendarState<T extends EventInterface>
         defaultTextStyle,
         isNextMonthDay,
         isThisMonthDay,
+        now,
       );
 
       final styleForBuilder = appTextStyle.merge(dayStyle);