FullCalendar in cakePHP 3.0 not displaying events on calendar - cakephp

Question

I am upgrading to cakePHP 3.0 and have almost all of the functionality of the FullCalendar plugin working except I can't get any events to populate on the calendar. I am not getting anymore error messages, which makes this difficult to solve. My controller method looks like this:
public function feed($id=null)
{
$this->request->allowMethod(['get']);
$this->layout = "ajax";
$vars = $this->params['url'];
$conditions = ['conditions' => ['UNIX_TIMESTAMP(start) >=' => $vars['start'], 'UNIX_TIMESTAMP(start) <=' => $vars['end']]];
$events = $this->Events->find('all', $conditions);
foreach($events as $event) {
if($event->all_day == 1) {
$allday = true;
$end = $event->start;
} else {
$allday = false;
$end = $event->end;
}
$data[] = array(
'id' => $event->id,
'title'=>$event->title,
'start'=>$event->start,
'end' => $end,
'allDay' => $allday,
'url' => Router::url('/') . 'full_calendar/events/view/'.$event->id,
'details' => $event->details,
'className' => $event->event_type->color
);
}
$this->set("json", json_encode($data));
}
My View is :
<?php
/*
* View/FullCalendar/index.ctp
* CakePHP Full Calendar Plugin
*
* Copyright (c) 2010 Silas Montgomery
* http://silasmontgomery.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*/
?>
<div class="page-width">
<script type="text/javascript">plgFcRoot = "/<site name>/" + "full_calendar"; console.log(plgFcRoot);</script>
<?php
echo $this->Html->script(['/full_calendar/js/jquery-1.5.min', '/full_calendar/js/jquery-ui-1.8.9.custom.min', '/full_calendar/js/fullcalendar.min', '/full_calendar/js/jquery.qtip-1.0.0-rc3.min', '/full_calendar/js/ready']);
echo $this->Html->css('/full_calendar/css/fullcalendar');
?>
<div class="Calendar index">
<div id="calendar"></div>
</div>
<div class="actions">
<ul>
<li><?= $this->Html->link(__('New Event', true), ['controller' => 'events', 'action' => 'add']) ?></li>
<li><?= $this->Html->link(__('Manage Events', true), ['controller' => 'events']) ?></li>
<li><?= $this->Html->link(__('Manage Events Types', true), ['controller' => 'event_types']) ?></li>
</ul>
</div>
</div>
My ready.js is:
/*
* webroot/js/ready.js
* CakePHP Full Calendar Plugin
*
* Copyright (c) 2010 Silas Montgomery
* http://silasmontgomery.com
*
* Licensed under MIT
* http://www.opensource.org/licenses/mit-license.php
*/
// JavaScript Document
$(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',
firstHour: 8,
weekMode: 'variable',
aspectRatio: 2,
editable: false,
events: plgFcRoot + "/events/feed",
eventRender: function(event, element) {
element.qtip({
content: event.details,
position: {
target: 'mouse',
adjust: {
x: 10,
y: -5
}
},
style: {
name: 'light',
tip: 'leftTop'
}
});
},
eventDragStart: function(event) {
$(this).qtip("destroy");
},
eventDrop: function(event) {
var startdate = new Date(event.start);
var startyear = startdate.getFullYear();
var startday = startdate.getDate();
var startmonth = startdate.getMonth()+1;
var starthour = startdate.getHours();
var startminute = startdate.getMinutes();
var enddate = new Date(event.end);
var endyear = enddate.getFullYear();
var endday = enddate.getDate();
var endmonth = enddate.getMonth()+1;
var endhour = enddate.getHours();
var endminute = enddate.getMinutes();
if(event.allDay == true) {
var allday = 1;
} else {
var allday = 0;
}
var url = plgFcRoot + "/events/update?id="+event.id+"&start="+startyear+"-"+startmonth+"-"+startday+" "+starthour+":"+startminute+":00&end="+endyear+"-"+endmonth+"-"+endday+" "+endhour+":"+endminute+":00&allday="+allday;
$.post(url, function(data){});
},
eventResizeStart: function(event) {
$(this).qtip("destroy");
},
eventResize: function(event) {
var startdate = new Date(event.start);
var startyear = startdate.getFullYear();
var startday = startdate.getDate();
var startmonth = startdate.getMonth()+1;
var starthour = startdate.getHours();
var startminute = startdate.getMinutes();
var enddate = new Date(event.end);
var endyear = enddate.getFullYear();
var endday = enddate.getDate();
var endmonth = enddate.getMonth()+1;
var endhour = enddate.getHours();
var endminute = enddate.getMinutes();
var url = plgFcRoot + "/events/update?id="+event.id+"&start="+startyear+"-"+startmonth+"-"+startday+" "+starthour+":"+startminute+":00&end="+endyear+"-"+endmonth+"-"+endday+" "+endhour+":"+endminute+":00";
$.post(url, function(data){});
}
})
});
Any help in this matter would be greatly appreciated.
Sometimes I get this error in the console, but not every time:
GET http://localhost//full_calendar/events/feed?start=1433052000&end=1436076000&_=1433266131989 404 (Not Found)

Answer 1

I just solved my issue. I used a process of elimination and found that the conditions array that I had was set up incorrectly for cakePHP 3.0, so it was a cake issue. Instead of
CakePHP 2.x Syntax
$conditions = array('conditions' => array('UNIX_TIMESTAMP(start) >=' => $vars['start'], 'UNIX_TIMESTAMP(start) <=' => $vars['end']));
$events = $this->Event->find('all', $conditions);
it is:
CakePHP 3.x Syntax
$conditions = ['UNIX_TIMESTAMP(start) >=' => $vars['start'], 'UNIX_TIMESTAMP(start) <=' => $vars['end']];
$events = $this->Events->find('all', $conditions)->contain(['EventTypes']);
There isn't a conditions setting in the array, you just set the conditions which I got from this example in the cakePHP documentation:
$this->loadModel('Articles');
$recentArticles = $this->Articles->find('all', [
'limit' => 5,
'order' => 'Articles.created DESC'
]);