Jquery 将fullcalendar与extjs集成

我试图在一个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.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>

年假日历
$（文档）.ready（函数（）{
$（'#calendar'）.fullCalendar（{}）；

我确信这不是正确的方法，因为日历只是偶尔显示，如果我在完整日历初始化中添加一些选项，那么它将根本不会显示

---

在此方面的任何帮助都将不胜感激。

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

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

..我会在Ext JS窗口中创建一个空DIV（例如，使用autoEl），然后将jQuery fullcalendar呈现到窗口的DIV中。我更喜欢这种方法，原因有几个：有时开发人员在每次使用后都会破坏窗口，创建窗口资产（用于日历的DIV）对我来说更有意义在创建窗口附近，我仅在用户愿意查看日历时创建日历

---

我希望这能有所帮助。

为了其他人的利益，这里是我如何实现fullcalendar、extjs和cakephp的。 感谢上层的帮助

在任何extjs包含之前，在default.ctp中包含所有fullcalendar文件

不要包含fullcalendar打印css文件，因为它似乎会干扰自定义着色

在控制器（此处为事件控制器）中创建一个提要函数，如下所示：

函数提要（）{

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

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

回声$事件

在ext代码中（假设要弹出一个包含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'
        });
        }
    }
            })

win=新的外部窗口({
布局：'适合'，
宽度：650，
身高：650，
closeAction:“close”，
简单地说：错，
标题：“年假日历-萨默维尔之家”，
iconCls:'icon-thisYr'，//创建图标
莫代尔：是的，
项目：[
{xtype:'box'，
autoEl:{tag:'div'，
html:'
}
}],
听众：{
//当窗口被激活时
“激活”：函数（）{
//调用jqueryfullcalendar
$（“#日历”）.fullCalendar({
标题：{
左：“上一年，上一年，今天，下一年”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
//身高：650，
方面：2，
eventTextColor:“#e5”，
//从events/feed controller函数获取日历提要，并通过feed.ctp返回
事件：“http://'+host+'/shiftplan/events/feed”
});
}
}
})

使用autoEl，我们可以放置需要渲染fullcalendar的div。然后我们监听窗口的激活事件，并以正常方式初始化fullcalendar。

---

没问题！

谢谢您的回复。我已经按照您的建议使用autoel创建了一个div，效果很好，但我不确定现在如何在此div中激活fullcalendar。我将等待窗口创建完成-可能会侦听激活事件。处理该事件并使用类似于上面的代码创建日历：$（“#calendar”）.fullCalendar（{}）；我已经实现了你的建议-如果我将一个示例事件放入日历初始化中，它会很有用，尽管事件显示在日历上，但我似乎无法让backgroundColor:“red”起作用（设置单个事件的颜色）。在chrome调试中，元素应用了正确的css（即红色）但是它被划掉了-我想这意味着它在其他地方被重写了？感谢您目前的帮助..Ext JS样式表正在重写红色。如果您可以控制红色样式，请尝试添加！important（bang important）。否则，您可以使用调试器查找导致干扰的Ext JS CSS，然后对其进行编辑（ext all.css）或者添加您自己版本的样式，使Ext JS无效。有意义吗？我已经注释掉fullcalendar.print.css文件，这将启用每个事件的样式。感谢您提供此指南。尽管您在将近9年前编写了此指南，但我已成功地将CakePHP 4.0、ExtJS 4.2和fullcalendar 4.2一起使用，并呈现了缩放ndar在一个选项卡面板中。我必须找出一些不同的东西，但大部分过程非常接近您的步骤。如果其他人想知道他们是否可以集成这3个框架，是的，您可以；）

                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'
        });
        }
    }
            })