From fe05a2bd0fea202f71c51c346bec614c66bb6d91 Mon Sep 17 00:00:00 2001 From: Dhaval Kansara Date: Tue, 8 Aug 2023 14:28:05 +0530 Subject: [PATCH] :sparkles: issue #59 provider support to add start duration in the day view calendar. --- CHANGELOG.md | 2 + README.md | 112 +++++++++++++---------- example/lib/widgets/day_view_widget.dart | 1 + lib/src/day_view/day_view.dart | 31 +++++++ 4 files changed, 97 insertions(+), 49 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 65ec22f6..633999f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ Issue [#205 - SafeArea can't be deactivated on MonthView](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/205) - Fixed Issue [#237 - DayView & MonthView layout issue in landscape mode](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/237) +- Added Feature + [#57 - Change default start hour in DayView](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/issues/57) # [1.0.3 - 3 Apr 2023](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/tree/1.0.3) diff --git a/README.md b/README.md index 91124594..3192b892 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,8 @@ [![Build](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/workflows/Build/badge.svg?branch=master)](https://github.com/SimformSolutionsPvtLtd/flutter_calendar_view/actions) [![calendar_view](https://img.shields.io/pub/v/calendar_view?label=calendar_view)](https://pub.dev/packages/calendar_view) -A Flutter package allows you to easily implement all calendar UI and calendar event functionality. +A Flutter package allows you to easily implement all calendar UI and calendar +event functionality. For web demo visit [Calendar View Example](https://simformsolutionspvtltd.github.io/flutter_calendar_view/). @@ -39,7 +40,8 @@ visit [Calendar View Example](https://simformsolutionspvtltd.github.io/flutter_c ## Implementation -1. Wrap `MaterialApp` with `CalendarControllerProvider` and assign `EventController` to it. +1. Wrap `MaterialApp` with `CalendarControllerProvider` and + assign `EventController` to it. ```dart CalendarControllerProvider( @@ -111,8 +113,10 @@ visit [Calendar View Example](https://simformsolutionspvtltd.github.io/flutter_c CalendarControllerProvider.of(context).controller.remove(event); ``` - As soon as you add or remove events from the controller, it will automatically update the - calendar view assigned to that controller. See, [Use of EventController](#use-of-eventcontroller) + As soon as you add or remove events from the controller, it will + automatically update the + calendar view assigned to that controller. + See, [Use of EventController](#use-of-eventcontroller) for more info 4. Use `GlobalKey` to change the page or jump to a specific page or date. @@ -138,8 +142,8 @@ MonthView( cellAspectRatio: 1, onPageChange: (date, pageIndex) => print("$date, $pageIndex"), onCellTap: (events, date) { - // Implement callback when user taps on a cell. - print(events); + // Implement callback when user taps on a cell. + print(events); }, startDay: WeekDays.sunday, // To change the first day of the week. // This callback will only work if cellBuilder is null. @@ -179,12 +183,12 @@ For week view WeekView( controller: EventController(), eventTileBuilder: (date, events, boundry, start, end) { - // Return your widget to display as event tile. - return Container(); + // Return your widget to display as event tile. + return Container(); }, fullDayEventBuilder: (events, date) { - // Return your widget to display full day event view. - return Container(); + // Return your widget to display full day event view. + return Container(); }, showLiveTimeLineInAllDays: true, // To display live time line in all pages in week view. width: 400, // width of week view. @@ -205,71 +209,79 @@ visit [documentation](https://pub.dev/documentation/calendar_view/latest/calenda ### Use of `EventController` -`EventController` is used to add or remove events from the calendar view. When we add or remove -events from the controller, it will automatically update all the views to which this controller is +`EventController` is used to add or remove events from the calendar view. When +we add or remove +events from the controller, it will automatically update all the views to which +this controller is assigned. Methods provided by `EventController` -| Name | Parameters | Description | -|----------------|-----------|--------------| -| add |CalendarEventData\ event | Adds one event in controller and rebuilds view. | +| Name | Parameters | Description | +|----------------|---------------------------------------|------------------------------------------------------| +| add | CalendarEventData\ event | Adds one event in controller and rebuilds view. | | addAll | List\\> events | Adds list of events in controller and rebuilds view. | -| remove | CalendarEventData\ event | Removes an event from controller and rebuilds view. | -| getEventsOnDay | DateTime date | Returns list of events on `date` | +| remove | CalendarEventData\ event | Removes an event from controller and rebuilds view. | +| getEventsOnDay | DateTime date | Returns list of events on `date` | ### Use of `GlobalKey` -User needs to define global keys to access functionalities like changing a page or jump to a -specific page or date. Users can also access the `controller` assigned to respected view using the +User needs to define global keys to access functionalities like changing a page +or jump to a +specific page or date. Users can also access the `controller` assigned to +respected view using the global key. -By assigning global keys to calendar views you can access methods and fields defined by state class +By assigning global keys to calendar views you can access methods and fields +defined by state class of respected views. Methods defined by `MonthViewState` class: -| Name | Parameters | Description | -|------|------------|-------------| -| nextPage | none | Jumps to next page. | -| previousPage | none | Jumps to the previous page. | -| jumpToPage | int page | Jumps to page index defined by `page`. | -| animateToPage | int page | Animate to page index defined by `page`. | -| jumpToMonth | DateTime month | Jumps to the page that has a calendar for month defined by `month` | +| Name | Parameters | Description | +|----------------|----------------|----------------------------------------------------------------------| +| nextPage | none | Jumps to next page. | +| previousPage | none | Jumps to the previous page. | +| jumpToPage | int page | Jumps to page index defined by `page`. | +| animateToPage | int page | Animate to page index defined by `page`. | +| jumpToMonth | DateTime month | Jumps to the page that has a calendar for month defined by `month` | | animateToMonth | DateTime month | Animate to the page that has a calendar for month defined by `month` | Methods defined by `DayViewState` class. -| Name | Parameters | Description | -|------|------------|-------------| -| nextPage | none | Jumps to next page. | -| previousPage | none | Jumps to the previous page. | -| jumpToPage | int page | Jumps to page index defined by `page`. | -| animateToPage | int page | Animate to page index defined by `page`. | -| jumpToDate | DateTime date | Jumps to the page that has a calendar for month defined by `date` | -| animateToDate | DateTime date | Animate to the page that has a calendar for month defined by `date` | -| animateToEvent | CalendarEventData event | Animates to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | -| jumpToEvent | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | +| Name | Parameters | Description | +|-------------------|-------------------------|------------------------------------------------------------------------------------------------------------| +| nextPage | none | Jumps to next page. | +| previousPage | none | Jumps to the previous page. | +| jumpToPage | int page | Jumps to page index defined by `page`. | +| animateToPage | int page | Animate to page index defined by `page`. | +| jumpToDate | DateTime date | Jumps to the page that has a calendar for month defined by `date` | +| animateToDate | DateTime date | Animate to the page that has a calendar for month defined by `date` | +| animateToDuration | Duration duration | Animate to the `duration`
from where we want start the day DayView | +| animateToEvent | CalendarEventData event | Animates to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | +| jumpToEvent | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | Methods defined by `WeekViewState` class. -| Name | Parameters | Description | -|------|------------|-------------| -| nextPage | none | Jumps to next page. | -| previousPage | none | Jumps to the previous page. | -| jumpToPage | int page | Jumps to page index defined by `page`. | -| animateToPage | int page | Animate to page index defined by `page`. | -| jumpToWeek | DateTime week | Jumps to the page that has a calendar for month defined by `week` | -| animateToWeek | DateTime week | Animate to the page that has a calendar for month defined by `week` | +| Name | Parameters | Description | +|----------------|-------------------------|------------------------------------------------------------------------------------------------------------| +| nextPage | none | Jumps to next page. | +| previousPage | none | Jumps to the previous page. | +| jumpToPage | int page | Jumps to page index defined by `page`. | +| animateToPage | int page | Animate to page index defined by `page`. | +| jumpToWeek | DateTime week | Jumps to the page that has a calendar for month defined by `week` | +| animateToWeek | DateTime week | Animate to the page that has a calendar for month defined by `week` | | animateToEvent | CalendarEventData event | Animates to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | -| jumpToEvent | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | +| jumpToEvent | CalendarEventData event | Jumps to the page where a given `event` is and then scrolls to make that `event` visible on the screen. | ### Synchronize events between calendar views There are two ways to synchronize events between calendar views. -1. Provide the same `controller` object to all calendar views used in the project. -2. Wrap MaterialApp with `CalendarControllerProvider` and provide controller as argument as defined +1. Provide the same `controller` object to all calendar views used in the + project. +2. Wrap MaterialApp with `CalendarControllerProvider` and provide controller as + argument as defined in [Implementation](#implementation). ### Show only working days in WeekView. @@ -309,7 +321,9 @@ Above code will create `WeekView` with only five days, from monday to friday.
## Awesome Mobile Libraries -- Check out our other available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) + +- Check out our other + available [awesome mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) ## License diff --git a/example/lib/widgets/day_view_widget.dart b/example/lib/widgets/day_view_widget.dart index 58cbcd1d..452ebea7 100644 --- a/example/lib/widgets/day_view_widget.dart +++ b/example/lib/widgets/day_view_widget.dart @@ -18,6 +18,7 @@ class DayViewWidget extends StatelessWidget { return DayView( key: state, width: width, + startDuration: Duration(hours: 8), showHalfHours: true, heightPerMinute: 3, timeLineBuilder: _timeLineBuilder, diff --git a/lib/src/day_view/day_view.dart b/lib/src/day_view/day_view.dart index 1e861939..9c9c761e 100644 --- a/lib/src/day_view/day_view.dart +++ b/lib/src/day_view/day_view.dart @@ -184,6 +184,10 @@ class DayView extends StatefulWidget { final bool showHalfHours; + /// Duration from where default day view will be visible + /// By default it will be Duration(hours:0) + final Duration startDuration; + /// Main widget for day view. const DayView({ Key? key, @@ -223,6 +227,7 @@ class DayView extends StatefulWidget { this.dayDetectorBuilder, this.showHalfHours = false, this.halfHourIndicatorSettings, + this.startDuration = const Duration(hours: 0), }) : assert(timeLineOffset >= 0, "timeLineOffset must be greater than or equal to 0"), assert(width == null || width > 0, @@ -318,6 +323,10 @@ class DayViewState extends State> { // user adds new events. ..addListener(_reloadCallback); } + + WidgetsBinding.instance.addPostFrameCallback((_) { + animateToDuration(widget.startDuration); + }); } @override @@ -660,6 +669,7 @@ class DayViewState extends State> { _currentIndex = index; }); } + animateToDuration(widget.startDuration); widget.onPageChange?.call(_currentDate, _currentIndex); } @@ -776,6 +786,27 @@ class DayViewState extends State> { ); } + /// Animate to specific offset in a day view using the start duration + Future animateToDuration( + Duration startDuration, { + Duration duration = const Duration(milliseconds: 200), + Curve curve = Curves.linear, + }) async { + final offSetForSingleMinute = _height / 24 / 60; + final startDurationInMinutes = startDuration.inMinutes; + debugPrint("==> offSetForSingleMinute $offSetForSingleMinute " + "startDurationInMinutes $startDurationInMinutes "); + // Added ternary condition below to take care if user passing duration + // above 24 hrs then we take it max as 24 hours only + final offset = offSetForSingleMinute * (startDurationInMinutes > 3600 ? 3600 : startDurationInMinutes); + debugPrint("offSet $offset"); + _scrollController.animateTo( + offset.toDouble(), + duration: duration, + curve: curve, + ); + } + /// Animate to specific scroll controller offset void animateTo( double offset, {