Skip to content

Commit bd338fa

Browse files
authored
Merge pull request #4 from Indumathi1195R/patch-3
Update README.md
2 parents 2c60c4c + c540826 commit bd338fa

File tree

1 file changed

+0
-76
lines changed

1 file changed

+0
-76
lines changed

README.md

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,2 @@
1-
# Getting datetime details while tapping header, view header, agenda view and cells in Flutter event calendar.
2-
3-
In flutter event calendar, you can get the tapped `DateTime` details of header, view header and calendar cell using `OnTap` event of the calendar.
4-
5-
<img alt="Getting datetime details from calendar element" src="https://github.com/SyncfusionExamples/getting-datetime-calendar-fluter/blob/master/screenshots/getting%20calendar%20element%20details.gif" width="400" height="400" />|
6-
7-
## Step 1
8-
In initState(), set the default values such as view, alert dialog texts.
9-
```xml
10-
CalendarView _calendarView;
11-
String _text, _titleText;
12-
13-
@override
14-
void initState() {
15-
_calendarView = CalendarView.week;
16-
_text='';
17-
_titleText='';
18-
super.initState();
19-
}
20-
```
21-
## Step 2
22-
Trigger `onTap` callback of flutter calendar. Please find the following code for calendar.
23-
```xml
24-
Expanded(
25-
child: SfCalendar(
26-
viewHeaderStyle:
27-
ViewHeaderStyle(backgroundColor: viewHeaderColor),
28-
backgroundColor: calendarColor,
29-
view: _calendarView,
30-
onTap: calendarTapped,
31-
),
32-
),
33-
```
34-
35-
## Step 3
36-
Using `OnTap` event get the target tapped element details such as header, view header, time slots, agenda view and get the date time values from the callback and assign it to the content of the alert dialog widget.
37-
```xml
38-
void calendarTapped(CalendarTapDetails details) {
39-
if (details.targetElement == CalendarElement.header) {
40-
_text = DateFormat('MMMM yyyy')
41-
.format(details.date)
42-
.toString();
43-
_titleText='Header';
44-
}
45-
else if (details.targetElement == CalendarElement.viewHeader) {
46-
_text = DateFormat('EEEE dd, MMMM yyyy')
47-
.format(details.date)
48-
.toString();
49-
_titleText='View Header';
50-
}
51-
else if (details.targetElement == CalendarElement.calendarCell) {
52-
_text = DateFormat('EEEE dd, MMMM yyyy')
53-
.format(details.date)
54-
.toString();
55-
_titleText='Time slots';
56-
}
57-
showDialog(
58-
context: context,
59-
builder: (BuildContext context) {
60-
return AlertDialog(
61-
title:Container(child: new Text(" $_titleText")),
62-
content:Container(child: new Text(" $_text")),
63-
actions: <Widget>[
64-
new FlatButton(onPressed: (){
65-
Navigator.of(context).pop();
66-
}, child: new Text('close'))
67-
],
68-
);
69-
});
70-
}
71-
```
721
**[View document in Syncfusion Flutter Knowledge base](https://www.syncfusion.com/kb/10998/how-to-get-datetime-details-while-tapping-the-flutter-event-calendar-elements)**
73-
**Screenshots**
74-
752

76-
<img alt="header" src="https://github.com/SyncfusionExamples/getting-datetime-calendar-fluter/blob/master/screenshots/header.jpg" width="250" height="500" />|
77-
<img alt="view header" src="https://github.com/SyncfusionExamples/getting-datetime-calendar-fluter/blob/master/screenshots/view%20header.jpg" width="250" height="500" />|
78-
<img alt="cells" src="https://github.com/SyncfusionExamples/getting-datetime-calendar-fluter/blob/master/screenshots/cells.jpg" width="250" height="500" />|

0 commit comments

Comments
 (0)