|
1 | | -# How to update event calendar (SfCalendar) DisplayDate using showDatePicker in Flutter? |
2 | 1 |
|
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 | | -``` |
75 | 2 | **[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