Articles in this section
Category / Section

How to show custom agenda view in the Flutter Calendar?

4 mins read

In the Flutter Event Calendar, you can integrate a custom agenda view using the appointment details from the `OnTap` callback of the calendar.

 

 

agenda custom

 

 

 

Step 1:

Inside the state, initialize the default values:

List<Appointment> _appointmentDetails=<Appointment>[];

 

Step 2:

Trigger the `OnTap` callback of the calendar widget and get the appointment details from the `targetElement`. Using the appointment details, you can provide data to the custom agenda view below the calendar widget as per your requirement.

Expanded(
  child: SfCalendar(
    view: CalendarView.month,
    dataSource: getCalendarDataSource(),
    onTap: calendarTapped,
  ),
),
 
void calendarTapped(CalendarTapDetails calendarTapDetails) {
  if (calendarTapDetails.targetElement == CalendarElement.calendarCell) {
    setState(() {
      appointmentDetails = calendarTapDetails.appointments!.cast<Appointment>();
    });
  }
}

 

Step 3:

Use the ` ListView` widget inside the `Expanded` widget for showing appointment details. You can also use the `ListTile` widget to customize the agenda view with appointment details.

body: Column(
  children: <Widget>[
    Expanded(
      child: SfCalendar(
        view: _calendarView,
        dataSource: getCalendarDataSource(),
        onTap: calendarTapped,
      ),
    ),
Expanded(
    child: Container(
        color: Colors.black12,
        child: ListView.separated(
          padding: const EdgeInsets.all(2),
          itemCount: _appointmentDetails.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
                padding: EdgeInsets.all(2),
                height: 60,
                color: _appointmentDetails[index].color,
                child: ListTile(
                  leading: Column(
                    children: <Widget>[
                      Text(
                        _appointmentDetails[index].isAllDay
                            ? ''
                            : '${DateFormat('hh:mm a').format(_appointmentDetails[index].startTime)}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: Colors.white,
                            height: 1.7),
                      ),
                      Text(
                        _appointmentDetails[index].isAllDay
                            ? 'All day'
                            : '',
                        style: TextStyle(
                            height: 0.5, color: Colors.white),
                      ),
                      Text(
                        _appointmentDetails[index].isAllDay
                            ? ''
                            : '${DateFormat('hh:mm a').format(_appointmentDetails[index].endTime)}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: Colors.white),
                      ),
                    ],
                  ),
                  trailing: Container(
                      child: Icon(
                        getIcon(_appointmentDetails[index].subject),
                        size: 30,
                        color: Colors.white,
                      )),
                  title: Container(
                      child: Text(
                          '${_appointmentDetails[index].subject}',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontWeight: FontWeight.w600,
                              color: Colors.white))),
                ));
          },
          separatorBuilder: (BuildContext context, int index) =>
          const Divider(
            height: 5,
          ),
        )))
 

View the GitHub sample here

 


 

 

 

custom agenda view

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Conclusion

I hope you enjoyed learning about how to show custom agenda view in the Flutter Calendar.

You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (2)
Please  to leave a comment
HW
Hank wu

Hi,

I have set initialSelectedDate, but the event of initialSelectedDate will not be displayed directly

how to achieve

thanks

MS
Muniappan Subramanian

You can achieve your requirement by using the onSelectionChanged callback from the Flutter Calendar. Based on your requirement we have updated the sample for the same, please find the updated sample below,

We hope that this helps you.

Sample

HW
Hank wu

Thanks! Muniappan help a lot!

but that's not fit the schedule which have Recurrence Continuing from the previous question, if today there is a schedule that happens every week, but today is not startDay, it will not show the schedule

MS
Muniappan Subramanian

By using the “getOccurrenceAppointment” method you can achieve your requirement. Using this method, you can get the occurrence appointment details for the given pattern appointment at the specified date. If there is no appointment occurring on the date specified, null is returned. Based on that we have updated the sample, please find the sample for the same,

sample

Refer to our UG documentation to know more details about getOccurrenceAppointment in the calendar, https://help.syncfusion.com/flutter/calendar/appointments#get-occurrence-appointment

Access denied
Access denied