We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show a custom agenda view in the Flutter Calendar

Platform: Flutter |
Control: SfCalendar |
Published Date: February 20, 2020 |
Last Revised Date: May 10, 2021

In the Flutter Event Calendar, you can integrate 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 sample in GitHub

 

 

 

 

custom agenda view

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile