Skip to content

Commit 00f95b1

Browse files
ParthBaraiyavatsaltanna-simformsolutions
ParthBaraiya
authored and
vatsaltanna-simformsolutions
committed
🔖 Add EventControllerProvider.
Add onTap callback in all calendar views.
1 parent 2156e38 commit 00f95b1

30 files changed

+605
-433
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
- Update `README.md` file.
44
- Add license information in package files.
55
- Update project description in `pubspec.yaml`
6+
- Update documentation.
7+
- Add `CalendarControllerProvider`.
8+
- Add `onEventTap` callback in `WeekView` and `DayView`.
9+
- Add `onCellTap` callback in `MonthView`.
10+
- Make `controller` optional parameter in all views where `CalendarControllerProvider` is provided.
611

712
# 0.0.1
813

‎README.md‎

Lines changed: 118 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -16,121 +16,162 @@ For web demo visit [Calendar View Example](https://simformsolutionspvtltd.github
1616

1717
1. Add dependencies to `pubspec.yaml`
1818

19-
Get the latest version in the 'Installing' tab on [pub.dev](https://pub.dev/packages/calendar_view/install)
19+
Get the latest version in the 'Installing' tab on [pub.dev](https://pub.dev/packages/calendar_view/install)
2020

2121
```yaml
2222
dependencies:
2323
calendar_view: <latest-version>
2424
```
2525
2626
2. Run pub get.
27-
27+
2828
```shell
2929
flutter pub get
3030
```
3131

32-
2. Import package.
32+
3. Import package.
3333

3434
```dart
3535
import 'package:calendar_view/calendar_view.dart';
36-
3736
```
3837
3938
## Implementation
4039
41-
1. Initialize `EventController`
42-
43-
Make sure that you use same generic type on controller and views
44-
45-
```dart
46-
final controller = EventController<String>();
47-
```
48-
49-
2. Initialize GlobalKeys.(Optional)
50-
51-
- For `Month View`:
52-
53-
```dart
54-
final monthViewKey = GlobalKey<MonthViewState>();
55-
```
56-
57-
- For `Day View`:
58-
59-
```dart
60-
final dayViewKey = GlobalKey<DayViewState>();
61-
```
62-
63-
- For `Week View`:
40+
1. Wrap `MaterialApp` with `CalendarControllerProvider` and assign `EventController` to it.
6441
6542
```dart
66-
final weekViewKey = GlobalKey<WeekViewState>();
43+
CalendarControllerProvider(
44+
controller: EventController(),
45+
child: MaterialApp(
46+
// Your initialization for material app.
47+
),
48+
)
6749
```
6850
69-
3. Add calendar views (key is optional).
70-
71-
Make sure that you use same generic type on controller and views
51+
2. Add calendar views.
7252
73-
- For Month View
53+
For Month View
7454
7555
```dart
76-
MonthView<String>(
77-
key: monthViewKey,
78-
controller: controller,
56+
Scaffold(
57+
body: MonthView(),
7958
);
8059
```
8160
82-
- For Day View
61+
For Day View
8362
8463
```dart
85-
DayView<String>(
86-
key: dayViewKey,
87-
controller: controller,
64+
Scaffold(
65+
body: DayView(),
8866
);
8967
```
9068
91-
- For Week view
69+
For Week view
9270
9371
```dart
94-
WeekView<String>(
95-
key: weekViewKey,
96-
controller: controller,
72+
Scaffold(
73+
body: WeekView(),
9774
);
9875
```
9976
100-
For more info on parameters visit [documentation](https://pub.dev/documentation/calendar_view/latest/index.html).
77+
For more info on properties visit [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/calendar_view-library.html).
10178
102-
4. Use `controller` to add or remove events.
79+
3. Use `controller` to add or remove events.
10380
104-
- Add event:
81+
To Add event:
10582
10683
```dart
107-
final event = CalendarEventData<String>(
84+
final event = CalendarEventData(
10885
date: DateTime(2021, 8, 10);
109-
event: "Event 1", // Generic type String. You can use complex models as well.
86+
event: "Event 1",
11087
);
11188
112-
controller.add(event);
113-
114-
// Use controller.addAll(); to add multiple events.
89+
CalendarControllerProvider.of(context).controller.add(event);
11590
```
11691
117-
- Remove event:
92+
To Remove event:
11893
11994
```dart
120-
controller.remove(event);
95+
CalendarControllerProvider.of(context).controller.remove(event);
12196
```
12297
123-
As soon as you add or remove events for controller it will automatically update view assigned to that controller. See, [Use of EventController](#use-of-eventcontroller) for more info
98+
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
99+
100+
4. Use `GlobalKey` to change the page or jump to a specific page or date. See, [Use of GlobalKey](#use-of-globalkey) for more info.
101+
102+
## More on the calendar view
103+
104+
### Optional configurations/parameters in Calendar view
105+
106+
For month view
107+
108+
```dart
109+
MonthView(
110+
controller: EventController(),
111+
// to provide custom UI for month cells.
112+
cellBuilder: (date, events, isToday, isInMonth) {
113+
// Return your widget to display as month cell.
114+
return Container();
115+
},
116+
minMonth: DateTime(1990),
117+
maxMonth: DateTime(2050),
118+
initialMonth: DateTime(2021),
119+
cellAspectRatio: 1,
120+
onPageChange: (date, pageIndex) => print("$date, $pageIndex"),
121+
onCellTap: (events, date) {
122+
// Implement callback when user taps on a cell.
123+
print(events);
124+
}
125+
// This callback will only work if cellBuilder is null.
126+
onEventTap: (event, date) => print(event);
127+
);
128+
```
124129

125-
5. Use `GlobalKey` to change the page or jump to specific page or date. See, [Use of GlobalKey](#use-of-globalkey) for more info.
130+
For day view
131+
132+
```dart
133+
DayView(
134+
controller: EventController(),
135+
eventTileBuilder: (date, events, boundry, start, end) {
136+
// Return your widget to display as event tile.
137+
return Container();
138+
},
139+
showVerticalLine: true, // To display live time line in day view.
140+
showLiveTimeLineInAllDays: true, // To display live time line in all pages in day view.
141+
minMonth: DateTime(1990),
142+
maxMonth: DateTime(2050),
143+
initialMonth: DateTime(2021),
144+
heightPerMinute: 1, // height occupied by 1 minute time span.
145+
eventArranger: SideEventArranger(), // To define how simultaneous events will be arranged.
146+
onEventTap: (events, date) => print(events),
147+
);
148+
```
126149

127-
## How to Use
150+
For week view
151+
152+
```dart
153+
WeekView(
154+
controller: EventController(),
155+
eventTileBuilder: (date, events, boundry, start, end) {
156+
// Return your widget to display as event tile.
157+
return Container();
158+
},
159+
showLiveTimeLineInAllDays: true, // To display live time line in all pages in week view.
160+
width: 400, // width of week view.
161+
minMonth: DateTime(1990),
162+
maxMonth: DateTime(2050),
163+
initialMonth: DateTime(2021),
164+
heightPerMinute: 1, // height occupied by 1 minute time span.
165+
eventArranger: SideEventArranger(), // To define how simultaneous events will be arranged.
166+
onEventTap: (events, date) => print(events),
167+
);
168+
```
128169

129-
### Use of `EventController`
170+
To see the list of all parameters and detailed description of parameters visit [documentation](https://pub.dev/documentation/calendar_view/latest/calendar_view/calendar_view-library.html).
130171

131-
`EventController` is used for adding or removing events from calendar. When we add or remove events from controller, it will automatically update all the view to which this controller is assigned.
172+
### Use of `EventController`
132173

133-
If you are using all three views in your project and want to synchronize events between them, then pass same `controller` object to all views.
174+
`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.
134175

135176
Methods provided by `EventController`
136177

@@ -143,47 +184,53 @@ Methods provided by `EventController`
143184

144185
### Use of `GlobalKey`
145186

146-
User needs to define keys to access functionalities like changing a page or jump to a specific page or date.
187+
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.
147188

148-
User needs to define `GlobalKey<MonthViewState>`, `GlobalKey<DayViewState>` and `GlobalKey<WeekViewState>` for month view, day view and week view respectively. By assigning these keys to Views you can access methods defined by State class of respected views.
189+
By assigning global keys to calendar views you can access methods and fields defined by state class of respected views.
149190

150191
Methods defined by `MonthViewState` class:
151192

152193
| Name | Parameters | Description |
153194
|------|------------|-------------|
154195
| nextPage | none | Jumps to next page. |
155-
| previousPage | none | Jumps to previous page. |
196+
| previousPage | none | Jumps to the previous page. |
156197
| jumpToPage | int page | Jumps to page index defined by `page`. |
157198
| animateToPage | int page | Animate to page index defined by `page`. |
158-
| jumpToMonth | DateTime month | Jumps to page that has calendar for month defined `month` |
159-
| animateToMonth | DateTime month | Animate to page that has calendar for month defined by `month` |
199+
| jumpToMonth | DateTime month | Jumps to the page that has a calendar for month defined by `month` |
200+
| animateToMonth | DateTime month | Animate to the page that has a calendar for month defined by `month` |
160201

161202
Methods defined by `DayViewState` class.
162203

163204
| Name | Parameters | Description |
164205
|------|------------|-------------|
165206
| nextPage | none | Jumps to next page. |
166-
| previousPage | none | Jumps to previous page. |
207+
| previousPage | none | Jumps to the previous page. |
167208
| jumpToPage | int page | Jumps to page index defined by `page`. |
168209
| animateToPage | int page | Animate to page index defined by `page`. |
169-
| jumpToDate | DateTime date | Jumps to page that has calendar for month defined `date` |
170-
| animateToDate | DateTime date | Animate to page that has calendar for month defined by `date` |
210+
| jumpToDate | DateTime date | Jumps to the page that has a calendar for month defined by `date` |
211+
| animateToDate | DateTime date | Animate to the page that has a calendar for month defined by `date` |
171212

172213
Methods defined by `WeekViewState` class.
173214

174215
| Name | Parameters | Description |
175216
|------|------------|-------------|
176217
| nextPage | none | Jumps to next page. |
177-
| previousPage | none | Jumps to previous page. |
218+
| previousPage | none | Jumps to the previous page. |
178219
| jumpToPage | int page | Jumps to page index defined by `page`. |
179220
| animateToPage | int page | Animate to page index defined by `page`. |
180-
| jumpToWeek | DateTime week | Jumps to page that has calendar for month defined `week` |
181-
| animateToWeek | DateTime week | Animate to page that has calendar for month defined by `week` |
221+
| jumpToWeek | DateTime week | Jumps to the page that has a calendar for month defined by `week` |
222+
| animateToWeek | DateTime week | Animate to the page that has a calendar for month defined by `week` |
182223

224+
### Synchronize events between calendar views
225+
226+
There are two ways to synchronize events between calendar views.
227+
228+
1. Provide the same `controller` object to all calendar views used in the project.
229+
2. Wrap MaterialApp with `CalendarControllerProvider` and provide controller as argument as defined in [Implementation](#implementation).
183230

184231
## License
185232

186-
```
233+
```text
187234
MIT License
188235
189236
Copyright (c) 2021 Simform Solutions

‎example/lib/constants.dart‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,52 @@
1+
import 'package:flutter/material.dart';
2+
3+
import 'app_colors.dart';
4+
15
class AppConstants {
26
AppConstants._();
7+
8+
static var inputBorder = OutlineInputBorder(
9+
borderRadius: BorderRadius.circular(7),
10+
borderSide: BorderSide(
11+
width: 2,
12+
color: AppColors.lightNavyBlue,
13+
),
14+
);
15+
16+
static InputDecoration get inputDecoration => InputDecoration(
17+
border: inputBorder,
18+
disabledBorder: inputBorder,
19+
errorBorder: inputBorder.copyWith(
20+
borderSide: BorderSide(
21+
width: 2,
22+
color: AppColors.red,
23+
),
24+
),
25+
enabledBorder: inputBorder,
26+
focusedBorder: inputBorder,
27+
focusedErrorBorder: inputBorder,
28+
hintText: "Event Title",
29+
hintStyle: TextStyle(
30+
color: AppColors.black,
31+
fontSize: 17,
32+
),
33+
labelStyle: TextStyle(
34+
color: AppColors.black,
35+
fontSize: 17,
36+
),
37+
helperStyle: TextStyle(
38+
color: AppColors.black,
39+
fontSize: 17,
40+
),
41+
errorStyle: TextStyle(
42+
color: AppColors.red,
43+
fontSize: 12,
44+
),
45+
contentPadding: EdgeInsets.symmetric(
46+
vertical: 10,
47+
horizontal: 20,
48+
),
49+
);
350
}
451

552
class BreakPoints {

0 commit comments

Comments
 (0)