Help with FullCalendar functionality

Agenda
#1

I’ve been working with Agenda this week and I’m finding it really enjoyable to work with. Loads of great features and generally easy to modify.
I am however a bit stuck on one aspect and that’s working with FullCalendar. I have FullCalendar v5 working as expected using the Docs with the following javascript:

      document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: { center: 'dayGridMonth,timeGridWeek' },
                initialView: 'timeGridWeek',
                slotMinTime: "09:00:00",
                slotMaxTime: "23:00:00",
                 "eventSources": [
                     {
                    url: '/assets/components/agenda/overview.php',
                    type: 'POST',
                    startParam: 'startdate',
                    endParam: 'enddate',
                    data: function () {
                        return {
                            //calendars: calendars || 0,|
                            //categories: categories || 0,|
                            //query: query || '',|
                            limit: 0
                            };
                        }
                    }
                ]
                
            });
            
            calendar.render();
          });

I’d now like to make each event title open a modal window with full details. There is some information regarding this on the FullCalendar site but I can’t figure out how to apply it in this instance. Any pointers in the right direction greatly appreciated.
Thanks
J

#2

Hey Janice,

You have to use eventClick - Docs | FullCalendar and create a modal with the data received in the parameter. I don’t know, what javascript/css framework you are using.

There is an question on stackoverflow for this, working with jQuery (not sure, wether the answer is correct):

#3

Hi @jako Thanks for your reply.
I can probably get the modal working but what I can’t get my head around is that the FC calendar is populated with it’s default code, so how do I insert any code for the modal window content?
Sorry if I’m missing the obvious.
Screenshot 2022-11-17 at 17.03.58

#4

All data retrieved with the calendar can be accessed with arg.event object in the eventClick method. You can log this in the browser console, to see what’s available. You also can set breakpoints to debug your code and see what is available. If you look into the answer of the overview.php connector, you see all data that is sent by Agenda to FullCalendar.

If you want to display the full data of one event, you can redirect the user to a MODX resource that has a AgendaDetail snippet call on it. The link has to send the arg.event.id property in the event get parameter. I.e. window.location.href = "agendadetail.html?event" + arg.event.id.