Question

我正在使用CakePHP 3.1，如果硬编码，我可以在日历上显示事件。我也可以通过将数组粘贴到jsbin中然后使用url从jsbin获取js文件来获取事件，如完整日历文档here中所述，然后使用标准FullCalendar的JSON Feed Template链接。我需要能够使用feed url来抓取事件，以便动态添加事件。

您可以看到我的json Feed数组here。您可以在控制台here中看到显示的对象。

控制器中的Feed方法：

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']);
}

从ready.js文件渲染完整日历：

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'
                }
            });
        }
    })
});

Answer 1

我认为您只需要指定Feed网址或添加事件功能

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

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

或

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

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

将您的事件Feed的内容粘贴到jsbin并调用它来绕过访问控制允许来源，它可以正常工作：example jsbin

Answer 2

看起来像使用$ this-＆gt; loadComponent（'RequestHandler'）;在我的应用程序控制器中导致问题。我从我的app控制器中删除了它，现在它显示了事件。

如果您想使用请求处理程序并且只有一个项目要序列化，您可以像@ndm建议的那样使用：

$this->set('_serialize', 'your_variable');

如果您尝试通过序列化传递数组，它将包装您的json而不能使用FullCalendar：

$this->set('_serialize', ['your_variable']);

使用CakePHP 3.x无法使JSON Feed在完整日历中运行

2 个答案: