Welcome to the Flutter feedback portal. We’re happy you’re here! If you have feedback on how to improve the Flutter, we’d love to hear it!
Thanks for joining our community and helping improve Syncfusion products!
Currently, we are able to group appointments based on their respective dates and display them in list view, but we need a built-in option to do so.
Grouping appointments and showing them in list view
|
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_calendar/calendar.dart'; void main() => runApp(const AgendaItemHeight()); class AgendaItemHeight extends StatelessWidget { const AgendaItemHeight({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: CustomAgendaHeight(), ); } } class CustomAgendaHeight extends StatefulWidget { const CustomAgendaHeight({Key? key}) : super(key: key); @override State<StatefulWidget> createState() => ScheduleExample(); } class ScheduleExample extends State<CustomAgendaHeight> { late List<AppointmentGroup> appointmentGroups; List<Appointment> selectedAppointments = []; @override void initState() { super.initState(); appointmentGroups = getAppointmentGroups(); } @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Expanded( child: SfCalendar( view: CalendarView.month, onTap: (CalendarTapDetails details) { if (details.targetElement == CalendarElement.calendarCell) { _showAppointmentsForDate(details.date!); } }, dataSource: _DataSource(appointmentGroups), ), ), Expanded( child: selectedAppointments.isNotEmpty ? ListView.builder( itemCount: selectedAppointments.length, itemBuilder: (BuildContext context, int index) { final appointment = selectedAppointments[index]; return Container( margin: const EdgeInsets.symmetric( vertical: 2.0, horizontal: 4.0), padding: const EdgeInsets.all(8.0), color: appointment.color, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( appointment.subject, style: const TextStyle( color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 4.0), Text( '${appointment.startTime.hour}:${appointment.startTime.minute.toString().padLeft(2, '0')}' ' - ' '${appointment.endTime.hour}:${appointment.endTime.minute.toString().padLeft(2, '0')}', style: const TextStyle( color: Colors.white, fontSize: 14.0, ), ), ], ), ); }, ) : const Center(child: Text('No appointments')), ), ], ), ); } void _showAppointmentsForDate(DateTime date) { setState(() { selectedAppointments = []; for (var group in appointmentGroups) { for (var appointment in group.appointments) { if (appointment.startTime.year == date.year && appointment.startTime.month == date.month && appointment.startTime.day == date.day) { selectedAppointments.add(appointment); } } } }); } List<AppointmentGroup> getAppointmentGroups() { final List<Appointment> appointments = <Appointment>[]; appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 1)), endTime: DateTime.now().add(const Duration(hours: 2)), subject: 'Support Update', color: const Color.fromARGB(255, 51, 45, 48), )); appointments.add(Appointment( startTime: DateTime.now(), endTime: DateTime.now().add(const Duration(hours: 1)), subject: 'Business Meeting', color: const Color(0xFFf527318), )); appointments.add(Appointment( startTime: DateTime.now(), endTime: DateTime.now().add(const Duration(hours: 2)), subject: 'Support Update', color: const Color(0xFFf3282b8), )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 3)), endTime: DateTime.now().add(const Duration(hours: 4)), subject: 'Birthday Update', color: const Color(0xFFfb21f66), )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 1)), endTime: DateTime.now().add(const Duration(hours: 2)), subject: 'Business Meeting', color: const Color(0xFFf2a7886), )); appointments.add(Appointment( startTime: DateTime.now().add(const Duration(hours: 2)), endTime: DateTime.now().add(const Duration(hours: 3)), subject: 'Support Update', color: const Color(0xFFf2a7886), )); List<Appointment> supportMeetings = []; List<Appointment> businessMeetings = []; List<Appointment> birthdays = []; for (var appointment in appointments) { if (appointment.subject.contains('Support')) { supportMeetings.add(appointment); } else if (appointment.subject.contains('Business')) { businessMeetings.add(appointment); } else { birthdays.add(appointment); } } // Sort each group by start time supportMeetings.sort((a, b) => a.startTime.compareTo(b.startTime)); businessMeetings.sort((a, b) => a.startTime.compareTo(b.startTime)); birthdays.sort((a, b) => a.startTime.compareTo(b.startTime)); return [ AppointmentGroup('Support Meetings', supportMeetings), AppointmentGroup('Business Meetings', businessMeetings), AppointmentGroup('General Meetings', birthdays), ]; } } class AppointmentGroup { final String groupName; final List<Appointment> appointments; AppointmentGroup(this.groupName, this.appointments); } class _DataSource extends CalendarDataSource { final List<AppointmentGroup> appointmentGroups; _DataSource(this.appointmentGroups) { appointments = appointmentGroups .expand((group) => group.appointments) .toList(growable: false); } } |
Bold BI
Bold Reports
BoldDesk