Cannot get JSON Feed to work in Full Calendar with CakePHP 3.x

Question

I am using CakePHP 3.1 and I can get the events to show on the calendar if they are hard coded. I can also get the events by pasting the array into jsbin and then using the url to get the js file from jsbin as explained in the full calendar docs here and then using the JSON Feed Template link for standard FullCalendar. I need to be able to use the feed url to grab the events so that the events are dynamically added.

You can see my json feed array here. You can see the displayed object in console here.

Feed Method in controller:

public function feed($id=null) {
    $this->viewBuilder()->layout('ajax');
    $vars = $this->request->query([]);
    $conditions = ['UNIX_TIMESTAMP(start) >=' => $vars['start'], 'UNIX_TIMESTAMP(start) <=' => $vars['end']];
    $events = $this->Events->find('all', $conditions)->contain(['EventTypes']);
    foreach($events as $event) {
        if($event->all_day === 1) {
            $allday = true;
            $end = $event->start;
        } else {
            $allday = false;
            $end = $event->end;
        }
        $json[] = array(
                'id' => $event->id,
                'title'=> $event->title,
                'start'=> $event->start,
                'end' => $end,
                'allDay' => $allday,
                'url' => Router::url(['action' => 'view', $event->id]),
                'details' => $event->details,
                'className' => $event->event_type->color
        );
    }
    $this->set('json', json_encode($json, JSON_HEX_QUOT | JSON_HEX_TAG));
    $this->set('_serialize', ['json']);
}

Rendering Full Calendar from ready.js file:

jQuery(document).ready(function ($) {

    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({
        header: {
            left: 'title',
            center: '',
            right: 'today agendaDay,agendaWeek,month prev,next'
        },
        defaultView: 'month',
        fixedWeekCount: false,
        scrollTime: "08:00:00",
        aspectRatio: 2,
        editable: adminEdit,
        events: {
            url: 'https://www.utahreia.org/events/feed', //navigate to this url to see json feed array
            type: 'POST',
            success: function (data) {
                console.log(data);
            },
            error: function (data) {
                console.log(data);
            }
        },
        eventRender: function (event, element) {
            element.qtip({
                content: event.details,
                position: { 
                    target: 'mouse',
                    adjust: {
                        x: 10,
                        y: -5
                    }
                },
                style: {
                    name: 'light',
                    tip: 'leftTop'
                }
            });
        }
    })
});

just send the data array without creating outer object {json: /* your data array*/} — charlietfl
@charlietfl I would, but I am not sure how to do that. I believe CakePHP 3 is automatically creating the outer object. — Battousai
no...you are when you set it inside json property. Just send the json_encode — charlietfl
@charlietfl you mean when I json_encode it? I am not sure where I am setting it inside json property. — Battousai
you have 2 set and are nesting the data and serializing it as well. Just send the array — charlietfl

xkcd149 xkcd149 · Accepted Answer · 2016-01-04T20:16:08

I believe you just need to specify the feed url or add a function for events

http://fullcalendar.io/docs/event_data/events_json_feed/

...
events: 'https://www.utahreia.org/events/feed',
...

or

http://fullcalendar.io/docs/event_data/events_function/

...
events: function(start, end, timezone, callback) {
    $.ajax();
}
...

Pasting the contents of your events feed into jsbin and calling it to get around the access countrol allowed origins, it works: example jsbin

Cannot get JSON Feed to work in Full Calendar with CakePHP 3.x

2 Answers