Skip to content

Commit e6e4cc5

Browse files
Update README.md
KB link updated.
1 parent 3f00594 commit e6e4cc5

File tree

1 file changed

+0
-79
lines changed

1 file changed

+0
-79
lines changed

README.md

Lines changed: 0 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,2 @@
1-
# How to update event calendar (SfCalendar) DisplayDate using showDatePicker in Flutter?
21

3-
In flutter event calendar, you can dynamically update the initialDisplayDate using DatePicker.
4-
5-
<img alt="Binding date from datepicker to calendar" src="https://github.com/SyncfusionExamples/date-picker-with-event-calendar-flutter/blob/master/screenshots/Datepicker%20and%20calendar.gif" width="250" height="400" />|
6-
7-
## Step 1
8-
9-
In initState(), set the default values such as view, initial display date for SfCalendar, initial picked date for DatePicker.
10-
11-
```xml
12-
CalendarView _calendarView;
13-
DateTime _datePicked;
14-
DateTime _calendarDate;
15-
16-
@override
17-
void initState() {
18-
_calendarView = CalendarView.week;
19-
_datePicked = DateTime.now();
20-
_calendarDate = DateTime.now();
21-
super.initState();
22-
}
23-
```
24-
25-
# Step 2
26-
Trigger the `OnViewChanged` callback of the calendar and please find the following code for updating picked date of DatePicker from visible dates of the calendar and updating initialDisplayDate from picked date of the DatePicker widget.
27-
28-
```xml
29-
body: Column(
30-
children: <Widget>[
31-
Expanded(
32-
child: SfCalendar(
33-
initialDisplayDate: _calendarDate,
34-
view: _calendarView,
35-
onViewChanged: _viewChanged,
36-
),
37-
),
38-
],
39-
),
40-
41-
void _viewChanged(ViewChangedDetails viewChangedDetails) {
42-
SchedulerBinding.instance.addPostFrameCallback((duration) {
43-
_datePicked = viewChangedDetails
44-
.visibleDates[viewChangedDetails.visibleDates.length ~/ 2];
45-
});
46-
}
47-
```
48-
49-
## Step 3
50-
Using showDatePicker widget selecting a date and assign it to the calendar initialDisplayDate.
51-
52-
```xml
53-
actions: <Widget>[
54-
FlatButton(
55-
onPressed: () {
56-
showDatePicker(
57-
context: context,
58-
initialDate: _datePicked,
59-
firstDate: DateTime(2000),
60-
lastDate: DateTime(2100))
61-
.then((DateTime date) {
62-
if (date != null && date != _calendarDate)
63-
setState(() {
64-
_calendarDate = date;
65-
});
66-
});
67-
},
68-
child: Icon(
69-
Icons.date_range,
70-
color: Colors.white,
71-
),
72-
)
73-
],
74-
```
752
**[View document in Syncfusion Flutter Knowledge base](https://www.syncfusion.com/kb/11010/how-to-update-event-calendar-sfcalendar-displaydate-using-showdatepicker-in-flutter)**
76-
77-
**Screenshots**
78-
79-
<img alt="Display date" src="http://www.syncfusion.com/uploads/user/kb/flut/flut-690/flut-690_img2.jpeg" width="250" height="500" />|
80-
<img alt="Picker date" src="http://www.syncfusion.com/uploads/user/kb/flut/flut-690/flut-690_img3.jpeg" width="250" height="500" />|
81-
<img alt="picker display date" src="http://www.syncfusion.com/uploads/user/kb/flut/flut-690/flut-690_img4.jpeg" width="250" height="500" />|

0 commit comments

Comments
 (0)