# Help with FullCalendar functionality

**URL:** <https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407>\
**Category:** Agenda & Cursus\
**Created:** [November 17, 2022, 1:54pm UTC](https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407 "2022-11-17T13:54:00Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![9thwave](https://forum.modmore.com/user_avatar/forum.modmore.com/9thwave/32/243_2.png) [@9thwave](https://forum.modmore.com/u/9thwave)\
**Post date:** [November 17, 2022, 1:54pm UTC](https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407/1 "2022-11-17T13:54:00Z")

</div>

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](https://docs.modmore.com/en/Agenda/v1/Tutorials/FullCalendar_Display.html#page_call_the_frontend_scripts) with the following javascript:

```auto
      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](https://fullcalendar.io/docs/eventClick) but I can’t figure out how to apply it in this instance. Any pointers in the right direction greatly appreciated.  
Thanks  
J

---

<div class="post-metadata">

**Author:** ![jako](https://forum.modmore.com/user_avatar/forum.modmore.com/jako/32/504_2.png) [@jako](https://forum.modmore.com/u/jako)\
**Post date:** [November 17, 2022, 2:44pm UTC](https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407/2 "2022-11-17T14:44:33Z")

</div>

Hey Janice,

You have to use [eventClick - Docs | FullCalendar](https://fullcalendar.io/docs/eventClick) 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):

> <https://stackoverflow.com/questions/67302723/event-click-show-the-selected-data-with-fullcalendar-function>

```auto

```

---

<div class="post-metadata">

**Author:** ![9thwave](https://forum.modmore.com/user_avatar/forum.modmore.com/9thwave/32/243_2.png) [@9thwave](https://forum.modmore.com/u/9thwave)\
**Post date:** [November 17, 2022, 5:07pm UTC](https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407/3 "2022-11-17T17:07:53Z")

</div>

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](https://forum.modmore.com/uploads/default/original/1X/77b8d5800bb6a781b099d6205bfaa81257ee145c.png)

---

<div class="post-metadata">

**Author:** ![jako](https://forum.modmore.com/user_avatar/forum.modmore.com/jako/32/504_2.png) [@jako](https://forum.modmore.com/u/jako)\
**Post date:** [November 17, 2022, 5:35pm UTC](https://forum.modmore.com/t/help-with-fullcalendar-functionality/2407/4 "2022-11-17T17:35:26Z")

</div>

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`.