FullCalendar cakephp：在日历上显示来自关联模型的数据

Question

我在一个节日网站上工作并使用了 FullCalendar 插件（工作正常），但我希望它应该显示节日表中的节日名称而不是日历中的标题。我在 events 表中包含一个festival_id 字段..

    class FullCalendarController extends FullCalendarAppController
 {

    var $name = 'FullCalendar';

    function index() {
    }

}


 class FullCalendarAppController extends AppController 


  {

          //var $components = array('Acl', 'Session');
        var $components = array('Session');
        var $helpers = array('Html', 'Form', 'Session', 'Js'=>array('Jquery'));
    }
class FullCalendar extends FullCalendarAppModel


{

    var $useTable = false;
    var $name = 'FullCalendar';

}

全日历索引.ctp

<script type="text/javascript">
plgFcRoot = '<?php echo $this->Html->url('/'); ?>' + "full_calendar";
</script>
<?php
echo $this->Html->script(array('/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'), array('inline' => 'false'));
echo $this->Html->css('/full_calendar/css/fullcalendar', null, array('inline' => false));
?>


<div class="Calendar index">
    <div id="calendar"></div>
</div>
<div class="actions">
    <ul>
        <li><?php echo $this->Html->link(__('New Event', true), array('plugin' => 'full_calendar', 'controller' => 'events', 'action' => 'add')); ?></li>
        <li><?php echo $this->Html->link(__('Manage Events', true), array('plugin' => 'full_calendar', 'controller' => 'events')); ?></li>
        <li><?php echo $this->Html->link(__('Manage Events Types', true), array('plugin' => 'full_calendar', 'controller' => 'event_types')); ?></li>
    </ul>
</div>

ready.js

$(document).ready(function() {

    // page is now ready, initialize the calendar...
    $('#calendar').fullCalendar({

        header: {
            left:   'title',
            center: '',
            right:  'today agendaDay,agendaWeek,month prev,next'
        },
        defaultView: 'agendaWeek',
        firstHour: 8,
        weekMode: 'variable',
        aspectRatio: 2,
        editable: true,
        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){});
        }
    })

});

不知道该怎么做！提前谢谢....

Answer 1

日历事件 JSON 表示形式如下所示

{
    id: "id value", 
    end: "end date", //when event ends - required field
    start: "start date", // when event starts - required field
    title: "title value",
    textColor: "color value",
    className: "add your style Class",
    backgroundColor: "color value",
    borderColor: "color value",
    editable: "boolean value"
}

只需确保此服务events: plgFcRoot + "/events/feed" 返回具有title: "title value" 属性集的日历事件。