laravel：如何在fullcalendar中提供数据，从控制器中的数据库中获取

Question

my Controller :

 public function eventCalender(){
    $eventCalender = [
        'title' => 'Matts Booking',
        'start' => '2019-05-05',
    ];
    $response = [
        'eventCalender'   => $eventCalender,
        'status'    => 1,
    ];
    return response()->json($response);
}

my js file :

function getEventCalender() {
    var actionurl = base_url + "/events/event-calender";
    $.ajax({
        type: "GET",
        url: actionurl,
        success: function (res) {
            if (res['status'] == 1) {
                $("#event-list").hide();
                $("#calender-list").show();
            } else {
                console.log("Something went wrong!!!!");
            }
        },
        error: function (jqXHR, exception) {
            $("#errormsg").show();
        }
    });
}
$(document).ready(function () {
    getEventCalender();
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {

            plugins: ['interaction', 'dayGrid', 'list', 'googleCalendar'],

            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,listYear'
            },

            defaultDate: '2019-03-12',
            navLinks: true,
            businessHours: true,
            editable: true,
            event: res.eventCalender,

        });

        calendar.render();
    });
});

so this is my controller and js file what i want is when i get data from controller how do i print that data in calendar ?

and i am using fullcalendar so when i add

document.addEventListener('DOMContentLoaded', function () { }

this function then only my calendar show in page.
If i put above function out of getEventCalender() function then my calender show perfectly but when i put it in getEventCalender() function like shown above it doesn't show my calendar.

</div>

Answer 1

Call the getEventCalender() in a document ready function to execute after all the content has loaded

$(function() {
   getEventCalender();
})