Japa
Japa

Reputation: 632

fullcalendar v4-alpha 3 load the events after GET from json

I´ve recently changed my fullcalendar version v3.4 to v4 because there are some new options that i need, but i normally use ajax whenever i need to fetch something and i´m used to it. My problem is, i don´t know how to load the events after getting this way:

document.addEventListener('DOMContentLoaded', function () {
    let calendarEl = document.getElementById('calendar');

    let calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'pt',
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listWeek'
        },
        buttonText: {
            today: 'Hoje',
            listWeek: 'lista',
        },
        events: {
            url: '/agenda/getEvents',
            method: 'GET',
            extraParams: {
                data: { "_token": "{{ csrf_token() }}" }
            },
        }
    });
    calendar.render();
});

The events are being fetch correctly, but now what?!, where do i implement a then or success function in order to load them?

Thanks for your time, regards.

Upvotes: 2

Views: 1090

Answers (1)

Pedro Costa
Pedro Costa

Reputation: 2996

The documentation is not clear, but you need to have the result of /agenda/getEvents (or /myfeed.php from documentation) in a valid JSON format of Event Object's (https://fullcalendar.io/docs/v4/event-object), example:

[
    {
      "id": "a",
      "title": "my event",
      "start": "2018-09-01"
    }
]

You can also have custom properties, but you'll then need to use the callback eventRender (https://fullcalendar.io/docs/eventRender) to manipulate the element with your event data.

There are also other callbacks that may be useful, see https://fullcalendar.io/docs/event-display and https://fullcalendar.io/docs/v4/event-parsing clarifies it much better.

Edit

OP was actually looking for https://fullcalendar.io/docs/v4/events-function, the v4 version registration of the callback is different from previous versions.

Upvotes: 2

Related Questions