How to update event Calendar display date in Flutter?
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,
),
)
],
Conclusion
I hope you enjoyed learning about how to update event calendar display date in Flutter.
You can refer to our Flutter Calender feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Calendar documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
