How can I show a popup with description for fullcalendar

Question

I am using fullcalendar and my goal is to have a simple pop up on the event click but for some reason I cannot get it to pull in the description in the alert.

Am I missing some JS to include or something? I tried to use the examples from their site but it was not working. I am sure it is something stupid I am missing.

<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var d = new Date();
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            height: 'parent',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            defaultView: 'dayGridMonth',
            defaultDate: d,

            eventClick: function(info) {
                alert('Event: ' + info.description);
            },

            navLinks: true, // can click day/week names to navigate views
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            events:
            [
                {
                    title: 'All Day Event<br>second line',
                    description: 'description for Long Event',
                    start: '2020-05-01'
                },
                {
                    title: 'Session',
                    start: '2020-05-12T10:30:00',
                    description: 'description for Long Event',
                    end: '2020-05-12T12:30:00'
                },
                {
                    title: 'Practical',
                    start: '2020-05-27T10:30:00',
                     description: 'description for Long Event',
                    end: '2020-05-27T12:30:00'
                }

            ]
        });

        calendar.render();
    });

</script>

Answer 1

You need to write

alert('Event: ' + info.event.extendedProps.description);

because

1) the info object isn't the event, the event is a sub-property of that info object - this is described at https://fullcalendar.io/docs/eventClick

and

2) description is a non-standard field as far as fullCalendar is concerned, and all non-standard fields are placed inside the extendedProps sub-property of the event object which fullCalendar generates based on the data you provide it - this is described at https://fullcalendar.io/docs/event-parsing