FullCalendar cakephp:显示日历上相关模型的数据

时间:2014-06-12 11:18:34

标签: fullcalendar cakephp-2.4

我正在节日网站上工作并使用FullCalendar插件(工作正常)但我希望它应该从节日表而不是日历中的标题显示节日名称。我在事件表中包含了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';

}

Fullcalendar index.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){});
        }
    })

});

不知道怎么做!提前谢谢....

1 个答案:

答案 0 :(得分:0)

以下是日历活动 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"属性集的日历活动