FullCalendar data load &#39;callback not workin (json/...)

Level 9

To view a working example of a FullCalendar implementation that I set up head over to https://fvrs.org/events

Here is the JS behind the calendar:

$(document).ready(function() {
    $("#calendar").fullCalendar({
        editable: false,
        events: '/events/events-json'
    });
});

When the calendar loads or when you change the month, fullCalendar will append GET variables including start and end (YYYY-mm-dd format). You can use these parameters to select events from your database.

This implementation does not have very many events so I just return them all without using any sort of query (bad practice, I will be revising soon). Here is my controller for this route:

public function getEventsJson() {
        $events = CalendarEvent::wherePublic(1)->get();

        $eventsJson = array();
        foreach ($events as $event) {
            $eventsJson[] = array(
                'id' => $event->id,
                'title' => $event->title,
                'url' => URL::to('events/event/' . date("Y/m/d/", strtotime($event->start_date)) . $event->slug),
                'start' => $event->start_date
            );
        }
        return Response::json($eventsJson);
    }

Hope this helps..

Level 1

Hi opheliadesign ,

Thanks for the reply. I have tried the same thing, but I still get nothing in firebug. Do you see anything happening in firebug that a request is being made, or is there no such request?

I am using a modal form where I load the calendar into. My CalendarController for showing the calender initialization is:

        $calendar = \Calendar::setOptions([ //set fullcalendar options
                'firstDay' => 1,
                'header' => array('left' => 'prev,next today', 'center' => 'title', 'right' => ''),
            ]); 
        
        $calendar->SetID('dayclosure');

My view:

    <div id="calenderinfo">
        <?php $lang = App::getLocale(); 
                if ($lang=='en') $lang='en-gb';
        ?>
        {!! HTML::script('js/fullcalendar/lang/'.$lang.'.js') !!}
        {!! $calendar->calendar() !!}
        {!! $calendar->script() !!}
        <script>
        $(document).ready(function() {
            $(document).ready(function() {
                $("#calendar-dayclosure").fullCalendar({
                    editable: false,
                    events: '/events/events-json'
                });
            });
        });
        </script>
    </div>

And my JS code for show the Modal form is:

    $( "#calendarmodal" ).on('shown.bs.modal', function(){      
        //I have to call this today function otherwise only the header is showing.
        $('#calendar-dayclosure').fullCalendar('today');
    });  

    var options = {
        "backdrop" : "static",
        keyboard: false
    }
    $('#calendarmodal').modal(options);

I get no errors for JS, but also no calls for data retrieval visible in my firebug.

Best Answer

Level 9

Wow that looks complicated. When fullCalendar loads it will send an HTTP GET request to your events URL, that is visible in Firebug - check out the link I posted with Firebug enabled.

Are you displaying the calendar within a modal? If so, I think you need to call a render command on it once it becomes visible, otherwise it will not load the data. - for example,

$( "#calendarmodal" ).on('shown.bs.modal', function(){      
        //I have to call this today function otherwise only the header is showing.
        $('#calendar-dayclosure').fullCalendar('today');
    $('#calendar-dayclosure').fullCalendar('render'); // this is needed if the calendar is not immediately visible on DOM ready
    });

Just curious, why are you setting the fullCalendar settings using PHP rather than just in the Javascript? This may be worth a shot.

1 like

Level 1

Yes, your code actually does work well within firebug. I am doing the reloading of all my modal forms this way, since I can update them then when opening my form. But you have a good point. Maybe for my calendar I don't need it that way. I will rewrite my code to see if that works better and will get back here. Thanks so far.

Level 9

@JacDev cool. But remember, if the calendar isn't visible when the page loads, it will not request the data. You need to call .fullCalendar('render') after it comes into view.

Level 1

Thanks, I wasn't aware of that about the render. Unfortunately with both tips it still doesn't work. If I try to load everything during the inital page load it still gets me the same problem and I don't see anything in firebug about a reload.

Let me try one more time to put some JS code later on in the document load.

Level 9

Do you have this up live anywhere?

Level 1

Update: Okay thanks, I got it working!

I have put the calendar script in my modalform during main page load. Moved the events registration to the end of the document on ready in my latest JS file.

The render/today option isn't necessary, but I still like the render option since now it actually shows something when I am opening the modal form. So it is solved, thanks!