fullcalendar를 extjs와 통합

Question

버튼 클릭에 응답하여로드 된 extjs 창에 우수한 fullcalendar를 표시하려고합니다.

다음과 같이 내가 창에 표시 할 달력을 얻을 수

:

<!--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> 

:

// ... 그리드 설정을 ..

//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.ctp보기

캘린더가 가끔 나타나기 때문에 이것이 올바른 방법이 아니라고 확신합니다. 그리고 fullcalendar 초기화에 몇 가지 옵션을 추가하면 전혀 표시되지 않습니다.

이 문제에 대한 도움을 주시면 감사하겠습니다.

Answer 1

나는 다른 접근 방식을 취할 것입니다. 대신에 다음의 ...

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

는 .... 나는 (예를 들어, autoEl 사용) 내선 JS 창에서 빈 DIV를 만든 다음 윈도우의 DIV에의 jQuery fullcalendar 렌더링 것이다. 몇 가지 이유로이 접근법을 선호합니다 : 때로는 개발자가 각 사용 후 창을 파괴, 창의 창출 근처에 윈도우 애셋 (달력의 div)을 만드는 것이 더 합리적입니다. 사용자가 볼 수있는 경우에만 캘린더를 만듭니다. 그것, ...

나는 이것이 도움이되기를 바란다.

Answer 2

여기에 다른 사람들을 위해서 fullcalendar, extjs 및 cakephp를 구현 한 방법이 있습니다. 이전 도움말을 보려면 상단 단계로 문의하십시오.

1. extj에 포함되기 전에 모든 fullcalendar 파일을 default.ctp에 포함하십시오.
2. 사용자 지정 색칠을 방해하는 것처럼 fullcalendar print css 파일을 포함하지 마십시오.

   기능 피드() {

   // 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과 함께 보내는 params. 또한 표준 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' 
        }); 
        } 
       } 
         }) 
   

것은 우리가 fullcalendar가 렌더링 될 필요가 사업부를 배치 할 수 있습니다 autoEl 사용.그런 다음 윈도우의 activate 이벤트를 듣고 정상적인 방식으로 fullcalendar를 초기화합니다. 문제가 없습니다!