How to get Datetime details while tapping the Flutter Calendar?
In the Flutter Event Calendar, you can get the tapped `DateTime` details of the header, view header, and calendar cell using the `OnTap` event.
STEP 1: First, initialize the necessary variables in your state class:
CalendarController _controller = CalendarController(); String? _text='', _titleText=''; Color? _headerColor, _viewHeaderColor, _calendarColor;
STEP 2: Add the `OnTap` callback for the flutter calendar. Please find the following code for the calendar.
Expanded( child: SfCalendar( viewHeaderStyle: ViewHeaderStyle(backgroundColor: _viewHeaderColor), backgroundColor: _calendarColor, view: CalendarView.week, controller: _controller, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek ], onTap: calendarTapped, ), ),
STEP 3: Using the `OnTap` event you can retrieve the tapped target element details such as header, view header, calendar cells, agenda view. You can then extract the date and time values from the callback and display them in an alert dialog:
void calendarTapped(CalendarTapDetails details) {
if (details.targetElement == CalendarElement.header) {
_text = DateFormat('MMMM yyyy').format(details.date!).toString();
_titleText = 'Header';
} else if (details.targetElement == CalendarElement.viewHeader) {
_text = DateFormat('EEEE dd, MMMM yyyy').format(details.date!).toString();
_titleText = 'View Header';
} else if (details.targetElement == CalendarElement.calendarCell) {
_text = DateFormat('EEEE dd, MMMM yyyy').format(details.date!).toString();
_titleText = 'Calendar cell';
}
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Container(child: new Text(" $_titleText")),
content: Container(child: new Text(" $_text")),
actions: <Widget>[
new TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text('close'))
],
);
});
}
|
I hope you enjoyed learning about how to get Datetime details while tapping the Flutter Calendar.
You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Calendar example 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!
