将fullcalendar与extjs集成

Question

我正试图在加载响应按钮单击的extjs窗口中显示出色的fullcalendar。

我可以得到日历在窗口中显示如下：

// ..电网配置..

//component bar 
      tbar: [{ 
      text:'Calendar', 
      tooltip: 'View leave calendar', 
      disabled: false, 
       iconCls:'icon-thisYr',//create icon 
       handler: function(){   
        var win; 
        // create the leave calendar window on the first click and reuse on   subsequent clicks 
        if(!win){ 
         win = new Ext.Window({ 
          layout:'fit', 
          width:750, 
          height:750, 
          closeAction:'hide', 
          plain: false, 
          //left: 150, 
          //top: 10, 
          items: [ 
           // Set to div id in default.ctp to display jquery fullcalendar when button is clicked. 
           calendar 
          ], 
          buttons: [{ 
           text: 'Close', 
           handler: function(){ 
            win.hide(); 
           } 
          }] 
         }) 
         win.show(); 
        } 
       } 
      }] 
//etc rest of grid 

，在我default.thtml中的观点：

<!--Set placeholder for jquery fullcalendar called from events grid tbar button--> 
<!--I think - set 'items' property on Ext.window to 'calendar' div--> 
<div id="hello-win" class="x-hidden"> 
    <div class="x-window-header">Annual Leave Calendar</div> 
     <!--Placeholder for fullcalendar--> 
     <div id="calendar"> 

      <script type='text/javascript'> 
       $(document).ready(function() { 
        $('#calendar').fullCalendar({}); 
      </script> 

     </div> 
</div> 

我相信这不是正确的方法来做到这一点，因为日历只是有时会显示，如果我添加一些选项到fullcalendar初始化，那么它根本不会显示。

任何帮助，将不胜感激。

Answer 1

我会采取不同的方法。取而代之的是下面的......

items: [ 
    // Set to div id in default.ctp ... 
    calendar 
], 

....我将创建一个Ext JS的窗口中的空白DIV（使用autoEl，例如），然后渲染jQuery的fullcalendar到窗口的DIV。我更喜欢这种方法，原因有几个：有时开发人员在每次使用后都销毁窗口，在创建窗口附近创建窗口资源（日历div）对我来说更有意义，我只在用户关心查看时创建日历它，...

我希望这可以帮助。

Answer 2

为了他人的利益，我在这里实现了fullcalendar，extjs和cakephp。 感谢Upper Stage提供帮助。

1. 在任何extjs包含之前，在default.ctp中包含所有fullcalendar文件。
2. 请勿包含fullcalendar打印css文件，因为它似乎会干扰自定义着色。

3. 在你的控制器创建Feed功能（事件，这里控制器）类似如下：

   功能饲料（）{

   // jquery fullcalendar feed via feed.ctp 
       Configure::write('debug', '0');  //turn debugging off; debugging breaks ajax 
       $this->layout = "ajax";    //set the layout to Ajax so the ajax doesn't break 
       $this->Event->recursive = 1; 
   
       //1. Transform request parameters to MySQL datetime format. 
       $mysqlstart = date('Y-m-d H:i:s', $this->params['url']['start']); 
       $mysqlend = date('Y-m-d H:i:s', $this->params['url']['end']); 
   
       //2. Get the events corresponding to the time range 
       $conditions = array('Event.event_date BETWEEN ? AND ?' => array($mysqlstart,$mysqlend)); 
       $events = $this->Event->find('all',array('conditions' =>$conditions)); 
   
       //print_r($events); 
   
       //3. Create the json array 
       $rows = array(); 
       //var $backgroundColor 
       for ($a=0; count($events)> $a; $a++) { 
   
       //Is it an all day event - set to false? 
       $all = ($events[$a]['Event']['allday'] == 0); 
       // color each leave type 
       if($events[$a]['Event']['leave_type'] == 'Annual Leave') 
        {$backgroundColor = "green";} 
       elseif($events[$a]['Event']['leave_type'] == 'Sick') 
        {$backgroundColor = "red";} 
       elseif ($events[$a]['Event']['leave_type'] == 'UA') 
        {$backgroundColor = "orange";} 
       // set nemonic for split shift 
       if($events[$a]['Event']['split_shift'] == 1) 
        {$splitShift = "+";} 
       else 
        {$splitShift = "";} 
   
       //Create an event entry 
       $rows[] = array('id' => $events[$a]['Event']['id'], 
       'title' => $splitShift.$events[$a]['Employee']['name'], 
       'start' => date('Y-m-d H:i', strtotime($events[$a]['Event']['event_date'])), 
       'backgroundColor' => $backgroundColor 
       ); 
       } 
       $this->set('events',json_encode($rows)); //send events to the view 
   
       } 
   

这检索所有的开始和结束日期之间的事件fullcalendar使用url发送的参数。它还映射和格式化数据库字段以符合标准fullcalendar要求。

1. 下添加一个名为feed.ctp一个视图文件，并把可变事件在它（当然PHP标签内）：

   回声$事件;

2. 在你转码（说一个窗口弹出与fullcalendar它做到以下几点：

      win = new Ext.Window({ 
          layout:'fit', 
          width:650, 
          height:650, 
          closeAction:'close', 
          plain: false, 
          title:'Annual Leave Calendar - Somerville House', 
          iconCls:'icon-thisYr',//create icon 
          modal: true, 
       items: [ 
       { xtype: 'box', 
       autoEl: { tag: 'div', 
       html: '<div id="calendar"></div>' 
       } 
       }], 
       listeners: { 
        // when the window is activated 
        'activate': function() { 
        // call jquery fullcalendar 
        $('#calendar').fullCalendar({ 
         header: { 
         left: 'prevYear,prev,today,next,nextYear', 
         center: 'title', 
         right: 'month,agendaWeek,agendaDay' 
         }, 
         //height: 650, 
         aspectRatio: 2, 
             eventTextColor: '#e5e5e5', 
         // get calendar feed from events/feed controller function and return via feed.ctp 
         events: 'http://'+host+'/shiftplanner/events/feed' 
        }); 
        } 
       } 
         }) 
   

使用autoEl我们可以放置fullcalendar需要要呈现的股利。然后我们收听窗口的激活事件，并以正常方式简单初始化fullcalendar。 没问题！