javascript - Fullcalendar.js can't add events

I have a Laravel project and I want to add events before fullcalendar.js renders the calendar. But can't do it by giving event objects array and ajax URL. Here is what I try tried:

    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'bootstrap',
            height: '100%',
            expandRows: true,
            slotMinTime: '08:00',
            slotMaxTime: '20:00',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            initialView: 'dayGridMonth',
            initialDate: '2020-09-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            events: '/getConcerts',
            locale: 'tr',
            selectable: true,
            nowIndicator: true,
        });
        calendar.render();
    });
Copy code

Even pre-configured events doesn't render:

document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'bootstrap',
            height: '100%',
            expandRows: true,
            slotMinTime: '08:00',
            slotMaxTime: '20:00',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            initialView: 'dayGridMonth',
            initialDate: '2020-09-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            events: [
                {
                    title: 'Deneme',
                    start: '2021-09-13',
                    allDay: true
                }
            ],
            locale: 'tr',
            selectable: true,
            nowIndicator: true,
        });
        calendar.render();
Copy code

Here is the/getConcerts route function:

$concerts = Concert::query()->whereStatus('1')->get();
$collection = collect();

foreach($concerts as $concert){
    $start_date = new DateTime($concert->start_date);
    $collection->push([
        'title' => json_decode($concert->title, true)['tr'],
        'start' => $start_date->format('Y-m-d'),
        'startTime' => $start_date->format('H:i')
    ]);
}

return response()->json(['concerts' => $collection]);
Copy code

Also tried this in my view:

    const eventsObj = [];

    $.ajax({
        url: '/getConcerts',
        method: 'GET',
        success: function(response){
                for (const concert of response.concerts) {
                    eventsObj.push({
                    title: concert.title,
                    start: concert.start,
                    startTime: concert.startTime
                });
            }
        }
    });

    console.log(eventsObj);
    document.addEventListener('DOMContentLoaded', function() {
        const calendarEl = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
            themeSystem: 'bootstrap',
            height: '100%',
            expandRows: true,
            slotMinTime: '08:00',
            slotMaxTime: '20:00',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            initialView: 'dayGridMonth',
            initialDate: '2020-09-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            events: eventsObj,
            locale: 'tr',
            selectable: true,
            nowIndicator: true,
        });
        calendar.render();
    });
Copy code

I don't understand why I can't add events to the calendar in these 2 ways.

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.