✨ fixes issue #267. show 0 hr and 24 hr markers in timeline.

CHANGELOG.md

@@ -1,3 +1,11 @@
+# [2.0.0 - Unreleased]
+
+- Adds flag `showEndHours` to show start and end time. [#267](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/267)
+  - Introduced 2 new typedefs `TimeLineTimeBuilder` and `TimeStringBuilder`.
+###  Breaking Changes
+- Use `TimeLineTimeBuilder` instead of `DateWidgetBuilder` to show time widget in timer line for `WeekView` and `DayView`.
+- User `TimeStringBuilder` instead of `StringProvider` to get the time string in time line for `WeekView` and `DayView`.
+
 # [1.2.0 - 10 May 2024](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tree/1.2.0)
 
 - Fixed issue when adding full-day events to WeekView, event is not display at correct date.  [#259](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/259)

example/ios/Runner.xcodeproj/project.pbxproj

@@ -127,7 +127,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {

example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

example/lib/main.dart

@@ -39,8 +39,8 @@ List<CalendarEventData> _events = [
     date: _now,
     title: "Project meeting",
     description: "Today is project meeting.",
-    startTime: DateTime(_now.year, _now.month, _now.day, 18, 30),
-    endTime: DateTime(_now.year, _now.month, _now.day, 22),
+    startTime: DateTime(_now.year, _now.month, _now.day, 0, 0),
+    endTime: DateTime(_now.year, _now.month, _now.day, 4, 0),
   ),
   CalendarEventData(
     date: _now.add(Duration(days: 1)),

example/lib/widgets/day_view_widget.dart

@@ -21,10 +21,11 @@ class DayViewWidget extends StatelessWidget {
       startDuration: Duration(hours: 8),
       showHalfHours: true,
       heightPerMinute: 3,
-      timeLineBuilder: _timeLineBuilder,
+      // timeLineBuilder: _timeLineBuilder,
       hourIndicatorSettings: HourIndicatorSettings(
         color: Theme.of(context).dividerColor,
       ),
+      showQuarterHours: true,
       onEventTap: (events, date) {
         Navigator.of(context).push(
           MaterialPageRoute(
@@ -48,22 +49,24 @@ class DayViewWidget extends StatelessWidget {
       liveTimeIndicatorSettings: LiveTimeIndicatorSettings(
         color: Colors.redAccent,
         showBullet: false,
-        showTime: true,
-        showTimeBackgroundView: true,
+        showTime: false,
+        showTimeBackgroundView: false,
       ),
+      showEndHours: true,
+      showStartHours: true,
     );
   }
 
-  Widget _timeLineBuilder(DateTime date) {
-    if (date.minute != 0) {
+  Widget _timeLineBuilder(TimeOfDay time, DateTime _) {
+    if (time.minute != 0) {
       return Stack(
         clipBehavior: Clip.none,
         children: [
           Positioned.fill(
             top: -8,
             right: 8,
             child: Text(
-              "${date.hour}:${date.minute}",
+              "${time.hour}:${time.minute}",
               textAlign: TextAlign.right,
               style: TextStyle(
                 color: Colors.black.withAlpha(50),
@@ -76,15 +79,48 @@ class DayViewWidget extends StatelessWidget {
       );
     }
 
-    final hour = ((date.hour - 1) % 12) + 1;
+    final hour = ((time.hour - 1) % 12) + 1;
+
+    if (time.hour == 0 && time.minute == 0) {
+      return Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned.fill(
+            top: -7,
+            right: 8,
+            child: Text(
+              "$hour ${time.hour ~/ 12 == 0 ? "am" : "pm"}",
+              textAlign: TextAlign.right,
+            ),
+          ),
+        ],
+      );
+    }
+
+    if (time.hour == 24 && time.minute == 0) {
+      return Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Positioned.fill(
+            top: -18,
+            right: 8,
+            child: Text(
+              "$hour ${time.hour ~/ 12 == 0 ? "am" : "pm"}",
+              textAlign: TextAlign.right,
+            ),
+          ),
+        ],
+      );
+    }
+
     return Stack(
       clipBehavior: Clip.none,
       children: [
         Positioned.fill(
           top: -8,
           right: 8,
           child: Text(
-            "$hour ${date.hour ~/ 12 == 0 ? "am" : "pm"}",
+            "$hour ${time.hour ~/ 12 == 0 ? "am" : "pm"}",
             textAlign: TextAlign.right,
           ),
         ),

lib/src/components/_internal_components.dart

@@ -41,6 +41,8 @@ class LiveTimeIndicator extends StatefulWidget {
   /// This field will be used to set end hour for day and week view
   final int endHour;
 
+  final EdgeInsets padding;
+
   /// Widget to display tile line according to current time.
   const LiveTimeIndicator({
     Key? key,
@@ -51,6 +53,7 @@ class LiveTimeIndicator extends StatefulWidget {
     required this.heightPerMinute,
     required this.startHour,
     this.endHour = Constants.hoursADay,
+    required this.padding,
   }) : super(key: key);
 
   @override
@@ -59,7 +62,7 @@ class LiveTimeIndicator extends StatefulWidget {
 
 class _LiveTimeIndicatorState extends State<LiveTimeIndicator> {
   late Timer _timer;
-  late TimeOfDay _currentTime = TimeOfDay.now();
+  late TimeOfDay _currentTime = TimeOfDay(hour: 24, minute: 0);
 
   @override
   void initState() {
@@ -78,7 +81,7 @@ class _LiveTimeIndicatorState extends State<LiveTimeIndicator> {
   /// This will rebuild TimeLineIndicator every second. This will allow us
   /// to indicate live time in Week and Day view.
   void _onTick(Timer? timer) {
-    final time = TimeOfDay.now();
+    final time = TimeOfDay(hour: 24, minute: 0);
     if (time != _currentTime && mounted) {
       _currentTime = time;
       setState(() {});
@@ -104,9 +107,10 @@ class _LiveTimeIndicatorState extends State<LiveTimeIndicator> {
     /// e.g. startHour : 1:00, endHour : 13:00 and live time is 17:00
     /// then no need to display live time indicator on timeline
     if (_currentTime.hour > widget.startHour &&
-        widget.endHour <= _currentTime.hour) {
+        widget.endHour < _currentTime.hour) {
       return SizedBox.shrink();
     }
+
     return CustomPaint(
       size: Size(widget.width, widget.liveTimeIndicatorSettings.height),
       painter: CurrentTimeLinePainter(
@@ -125,6 +129,7 @@ class _LiveTimeIndicatorState extends State<LiveTimeIndicator> {
         bulletRadius: widget.liveTimeIndicatorSettings.bulletRadius,
         timeBackgroundViewWidth:
             widget.liveTimeIndicatorSettings.timeBackgroundViewWidth,
+        padding: widget.padding,
       ),
     );
   }
@@ -145,7 +150,7 @@ class TimeLine extends StatefulWidget {
   final double timeLineOffset;
 
   /// This will display time string in timeline.
-  final DateWidgetBuilder timeLineBuilder;
+  final TimeLineTimeBuilder timeLineBuilder;
 
   /// Flag to display half hours.
   final bool showHalfHours;
@@ -167,6 +172,14 @@ class TimeLine extends StatefulWidget {
   /// This field will be used to set end hour for day and week view
   final int endHour;
 
+  /// Defines if we need to display the 0 hr and 24 hr text in time line or not.
+  final bool showEndHours;
+
+  /// Defines if we need to display the 0 hr and 24 hr text in time line or not.
+  final bool showStartHours;
+
+  final EdgeInsets padding;
+
   /// Time line to display time at left side of day or week view.
   const TimeLine({
     Key? key,
@@ -180,6 +193,9 @@ class TimeLine extends StatefulWidget {
     this.showQuarterHours = false,
     required this.liveTimeIndicatorSettings,
     this.endHour = Constants.hoursADay,
+    required this.showEndHours,
+    required this.showStartHours,
+    required this.padding,
   }) : super(key: key);
 
   @override
@@ -196,24 +212,6 @@ class _TimeLineState extends State<TimeLine> {
     _timer = Timer.periodic(Duration(seconds: 1), _onTick);
   }
 
-  @override
-  void dispose() {
-    _timer.cancel();
-    super.dispose();
-  }
-
-  /// Creates an recursive call that runs every 1 seconds.
-  /// This will rebuild TimeLine every second. This will allow us
-  /// to show/hide time line when there is overlap with
-  /// live time line indicator in Week and Day view.
-  void _onTick(Timer? timer) {
-    final time = TimeOfDay.now();
-    if (time != _currentTime && mounted) {
-      _currentTime = time;
-      setState(() {});
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
     return ConstrainedBox(
@@ -226,24 +224,30 @@ class _TimeLineState extends State<TimeLine> {
       ),
       child: Stack(
         children: [
-          for (int i = widget.startHour + 1; i < widget.endHour; i++)
+          for (int i = widget.startHour + (widget.showStartHours ? 0 : 1);
+              i < widget.endHour + (widget.showEndHours ? 1 : 0);
+              i++)
             _timelinePositioned(
               topPosition: widget.hourHeight * (i - widget.startHour) -
-                  widget.timeLineOffset,
+                  widget.timeLineOffset +
+                  widget.padding.top,
               bottomPosition: widget.height -
                   (widget.hourHeight * (i - widget.startHour + 1)) +
-                  widget.timeLineOffset,
+                  widget.timeLineOffset -
+                  widget.padding.bottom,
               hour: i,
             ),
           if (widget.showHalfHours)
             for (int i = widget.startHour; i < widget.endHour; i++)
               _timelinePositioned(
                 topPosition: widget.hourHeight * (i - widget.startHour) -
                     widget.timeLineOffset +
-                    widget._halfHourHeight,
+                    widget._halfHourHeight +
+                    widget.padding.top,
                 bottomPosition: widget.height -
                     (widget.hourHeight * (i - widget.startHour + 1)) +
-                    widget.timeLineOffset,
+                    widget.timeLineOffset -
+                    widget.padding.bottom,
                 hour: i,
                 minutes: 30,
               ),
@@ -253,10 +257,12 @@ class _TimeLineState extends State<TimeLine> {
               _timelinePositioned(
                 topPosition: widget.hourHeight * i -
                     widget.timeLineOffset +
-                    widget.hourHeight * 0.25,
+                    widget.hourHeight * 0.25 +
+                    widget.padding.top,
                 bottomPosition: widget.height -
                     (widget.hourHeight * (i + 1)) +
-                    widget.timeLineOffset,
+                    widget.timeLineOffset -
+                    widget.padding.bottom,
                 hour: i,
                 minutes: 15,
               ),
@@ -265,10 +271,12 @@ class _TimeLineState extends State<TimeLine> {
               _timelinePositioned(
                 topPosition: widget.hourHeight * i -
                     widget.timeLineOffset +
-                    widget.hourHeight * 0.75,
+                    widget.hourHeight * 0.75 +
+                    widget.padding.top,
                 bottomPosition: widget.height -
                     (widget.hourHeight * (i + 1)) +
-                    widget.timeLineOffset,
+                    widget.timeLineOffset -
+                    widget.padding.bottom,
                 hour: i,
                 minutes: 45,
               ),
@@ -278,6 +286,24 @@ class _TimeLineState extends State<TimeLine> {
     );
   }
 
+  @override
+  void dispose() {
+    _timer.cancel();
+    super.dispose();
+  }
+
+  /// Creates an recursive call that runs every 1 seconds.
+  /// This will rebuild TimeLine every second. This will allow us
+  /// to show/hide time line when there is overlap with
+  /// live time line indicator in Week and Day view.
+  void _onTick(Timer? timer) {
+    final time = TimeOfDay.now();
+    if (time != _currentTime && mounted) {
+      _currentTime = time;
+      setState(() {});
+    }
+  }
+
   /// To avoid overlap of live time line indicator, show time line when
   /// current min is less than 45 min and is previous hour or
   /// current min is greater than 15 min and is current hour
@@ -297,16 +323,15 @@ class _TimeLineState extends State<TimeLine> {
         left: 0,
         right: 0,
         bottom: bottomPosition,
-        child: Container(
+        child: SizedBox(
           height: widget.hourHeight,
           width: widget.timeLineWidth,
           child: widget.timeLineBuilder.call(
+            TimeOfDay(hour: hour, minute: minutes),
             DateTime(
               TimeLine._date.year,
               TimeLine._date.month,
               TimeLine._date.day,
-              hour,
-              minutes,
             ),
           ),
         ),