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: Inside the state set the default values for alert dialog texts.
CalendarController _controller = CalendarController();
String? _text='', _titleText='';
Color? _headerColor, _viewHeaderColor, _calendarColor;
STEP 2: Trigger the `onTap` callback of 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 get the tapped target element details such as header, view header, calendar cells, agenda view, and get the date and time values from the callback and assign it to the content of the alert dialog widget. Please find the example for header, view header and cells.
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!
Hi Samario Torres,
As per your requirement, you can display the current cell value when the cell is tapped by using the onCellTap callback. You can get the tapped cell value from the row by using the DataGridSource.effectiveRows collection. Please refer the following code snippet,
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid Demo',
overflow: TextOverflow.ellipsis)),
body: Column(children: [
Expanded(
child: SfDataGrid(
source: employeeDataGridSource,
onCellTap: (DataGridCellTapDetails details) {
showDialog(
context: context,
builder: (BuildContext context) => AlertDialog(
title: const Text('Tapped cell value'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('OK'))
],
content: Text(employeeDataGridSource.effectiveRows[
details.rowColumnIndex.rowIndex - 1]
.getCells()[details.rowColumnIndex.columnIndex]
.value
.toString())));
},
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
columnName: 'Name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'Designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
]))
]));
}
We have prepared a sample for your reference. Please refer the sample from the following link.
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/main99883181
Please let us know if you required any further assistance.
Regards, Sangeetha Raju.
How do you accomplish this with a SfDataGrid? i.e, using onCellTap. Thank you!!