Category / Section
How to update event calendar (SfCalendar) DisplayDate using showDatePicker in Flutter?
1 min read
In the Flutter Event Calendar, you can update the view display date using the `showDatePicker’ widget.
|
|
|
STEP 1: Inside the state initialize the calendar and default values.
Final CalendarController _controller = CalendarController(); DateTime? _datePicked = DateTime.now();
STEP 2: Update the calendar display date from the `showDatePicker` date. You can get the visible dates by triggering the `OnViewChanged` callback of the calendar and update the date of the `showDatePicker` widget using the visible dates.
body: Column(
children: <Widget>[
Expanded(
child: SfCalendar(
view: CalendarView.week,
controller: _controller,
onViewChanged: _viewChanged,
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.month,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek,
],
),
),
],
),
void _viewChanged(ViewChangedDetails viewChangedDetails) {
SchedulerBinding.instance.addPostFrameCallback((duration) {
_datePicked = viewChangedDetails
.visibleDates[viewChangedDetails.visibleDates.length ~/ 2];
});
}
STEP 3: Select a date and assign it to the calendar display date using the `showDatePicker` widget.
actions: <Widget>[
FlatButton(
onPressed: () {
showDatePicker(
context: context,
initialDate: _datePicked,
firstDate: DateTime(2000),
lastDate: DateTime(2100))
.then((DateTime date) {
if (date != null && date != _calendarDate)
setState(() {
_calendarDate = date;
});
});
},
child: Icon(
Icons.date_range,
color: Colors.white,
),
)
],
