FullCalendar.io extend event object from JSON events

Question

I've been using an older version of fullcalendar and am having trouble recreating my calendars in the current version of fullCalendar.

I have seen the documentation and understand the extendedProp created in the event object, but I'm having trouble recreating this action from a JSON result of events.

Old fullCalendar v3.9

function DoCalendar() {

    var URX = document.getElementById('url').value;
    var URL = AppUrl + "JSON/GetCalendar/" + URX;

    $('#Calendar').fullCalendar("destroy");
    $('#Calendar').fullCalendar("render");

    $('#Calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'basicWeek,month'
        },
        defaultView: 'month',
        //defaultDate:
        height: 'auto',
        fixedWeekCount: false,
        allDay: false,
        allDaySlot: false,
        displayEventTime: false,
        navLinks: false,
        eventLimit: false,
        events: { url: URL },
        eventColor: 'yellow',
        eventTextColor: 'black',
        eventRender: function (event, element) {

            element.find('.fc-title').html(event.title);

            event.eventColor = event.color;

            $(element).popover({
                title: event.start,
                content: event.popover,
                trigger: 'hover',
                placement: 'auto',
                html: true,
                container: 'body'
            });
        }
    })

New fullCalendar v5

function TestCalendar() {
    var calendarEl = document.getElementById('calendario');
    var teamId = document.getElementById('teamId').innerText;
    var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: {
            url: eventsURL,
            error: function () {
                $('#script-warning').show();
            }
        },
        eventColor: 'yellow',
        eventTextColor: 'black',
        eventClick: function (info) {
            alert('Event: ' + info.event.extendedProp);
        },
        eventRender: function (event, element) {
            console.log(event.extendedProp);
        }
    });
    calendar.render();
}

The current JSON result

[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]

eventClick: function (info) {
            alert('Event: ' + info.event.someField);
        }

continues to return undefined

Any help is appreciated

Answer 1

According to documentation here, https://fullcalendar.io/docs/event-object

You can get those details in object as below. it works for me.

 document.addEventListener('DOMContentLoaded', function () { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [{ "id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field" }, { "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" }, { "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }], eventColor: 'yellow', eventTextColor: 'black', eventClick: function (info) { alert('Event: ' + info.event.extendedProps["someField"]); }, eventRender: function (event, element) { console.log(event.extendedProp); } }); calendar.render(); });

 <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.2/main.css" rel="stylesheet"/> <div id='calendar'></div>