Интеграция fullcalendar с extjs

Question

Я пытаюсь отобразить отличный полный календарь в окне extjs, которое загрузилось в ответ на нажатие кнопки.

Я могу получить календарь для отображения в окне следующим образом:

// .. сеточная конфигурация ..

    //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:

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

В интересах других, вот как я реализовал fullcalendar, extjs и cakephp.Спасибо Upper Stage за более раннюю помощь.

1. Включите все файлы fullcalendar в файл default.ctp до того, как любые файлы extjs включат.
2. Не включайте файл css печати fullcalendar, как кажетсячтобы мешать пользовательской раскраске.

3. Создайте функцию подачи в вашем контроллере (контроллере событий здесь), как показано ниже:

   function 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 и поместите в него переменную events (конечно же, в тегах php):

   echo $ events;

2. В вашем коде ext (скажем, чтобы открыть окно с полным календарем, выполните следующие действия:

                   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, мы можем разместить div, в котором необходимо отобразить fullcalendar. Затем мы слушаем событие активации окна и просто инициализируем fullcalendar обычным способом. Нет проблем!

Answer 2

Я бы выбрал другой подход. Вместо следующего ...

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

.... Я хотел бы создать пустой DIV в окне Ext JS (например, используя autoEl), а затем отобразить полный календарь jQuery в DIV окна. Я предпочитаю такой подход по нескольким причинам: иногда разработчики уничтожают окна после каждого использования, для меня имеет больше смысла создавать оконные активы (div для календаря) рядом с созданием окна, я создаю календарь только в том случае, если пользователь хочет просмотреть это, ...

Надеюсь, это поможет.