I am using the SfCalender like a Timesheet. On click of a calender cell, I have to open a form which will have some fields like Id and ProjectName, and on submit of that form, these details should be pushed into the appointments list and display in the agenda.
Now, I have already added some data in DB and trying to fetch that data and display it on the agenda according to the month.
For eg:
I have got the response of December :
[{uuid: 101, projectName: "abc"}, {uuid: 102, projectName: "xyz"}]
Now I have to display this list on the agenda.
When I click on calendar cell, I am calling openForm function, which has an argument CalendarTapDetails details. I logged details.appointents, but it is showing empty, I don't know, why.
Here's the code
class Timesheet extends StatefulWidget {
@override
_TimesheetState createState() => _TimesheetState();
}
class _TimesheetState extends State<Timesheet> {
CalendarController _calendarController;
List<dynamic> appointments;
@override
initState() {
_calendarController = CalendarController();
final DateTime today = DateTime.now();
_calendarController.selectedDate = DateTime(
today.year,
today.month,
today.day,
);
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) async {
TimesheetBloc bloc = TimesheetProvider.of(context);
bloc.fetchTimesheetData();
});
}
@override
Widget build(BuildContext context) {
TimesheetBloc bloc = TimesheetProvider.of(context);
return Scaffold(
body: Theme(
data: ThemeData(primarySwatch: materialColorPrimary),
child: StreamBuilder<Response<TimesheetData>>(
stream: bloc.monthlyEventsStream,
builder: (context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
switch (snapshot.data.status) {
case Status.LOADING:
return Loading(loadingMessage: snapshot.data.message);
break;
case Status.COMPLETED:
print("snapshot.data: ${snapshot.data.data}");
return SfCalendar(
dataSource: _getDataSource(snapshot.data.data),
view: CalendarView.month,
showNavigationArrow: true,
monthViewSettings: MonthViewSettings(
showAgenda: true,
),
controller: _calendarController,
onTap: _openForm,
);
}
}
return Container();
}
),
));
}
TimesheetDataSource _getDataSource(data) {
appointments=<dynamic>[];
for(int i=0;i<data.timesheetResult.length;i++){
Map<String, dynamic> tObject = Map.castFrom(data.timesheetResult[i]);
appointments.add(TimesheetList(tObject['uuid'], tObject['project_name'], int.parse(tObject['date'])));
}
return TimesheetDataSource(appointments);
}
_openForm(CalendarTapDetails details) {
if (details.targetElement == CalendarElement.appointment ||
details.targetElement == CalendarElement.agenda) {
for (int i = 0; i < details.appointments.length; i++) {
final TimesheetList timesheetData = details.appointments[i];
String uuid = timesheetData.uuid;
String project_name = timesheetData.project_name;
showDialog(
context: context,
builder: (BuildContext context) {
Size size = MediaQuery.of(context).size;
return AlertDialog(
title: Container(child: new Text('$uuid')),
content: Container(
width: size.width * 0.25,
height: size.width * 0.15,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Text('$project_name'),
],
),
],
),
),
);
});
}
}
}
}
class TimesheetDataSource extends CalendarDataSource {
TimesheetDataSource(List<dynamic> source) {
appointments = source;
}
}
class TimesheetList {
TimesheetList(this.uuid, this.project_name, this.date);
String uuid;
String project_name;
int date;
}