Question

我试图在extjs窗口中显示优秀的fullcalendar，该窗口已加载以响应按钮点击。

我可以在窗口中显示日历，如下所示：

// .. grid config ..

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

我会采取不同的方法。而不是以下......

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

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

我希望这会有所帮助。

Answer 2

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

在任何extjs包括之前，在default.ctp中包含所有fullcalendar文件。
不要包含fullcalendar print css文件，因为它似乎会干扰自定义着色。

在您的控制器（此处为事件控制器）中创建一个Feed功能，类似于以下内容：

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要求。

接下来添加一个名为feed.ctp的视图文件并将events变量放入其中（当然在php标记内）：

echo $ events;

在您的分机代码中（比如弹出一个带有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需要渲染的div。然后我们听取窗口的activate事件并简单地以正常方式初始化fullcalendar。没问题！

将fullcalendar与extjs集成

2 个答案: