Question

I am trying to display the excellent fullcalendar in an extjs window that has loaded in response to a button click.

I can get the calendar to display in the window as follows:

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

and in my default.ctp view:

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

I am sure this is not the correct way to do this as the calendar only shows up sometimes and if I add some options to the fullcalendar initialisation then it won’t display at all.

Any help on this would be much appreciated.

Answer 1

I would take a different approach. Instead of the following…

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

…. I would create an empty DIV in the Ext JS window (using autoEl, for example) and then render the jQuery fullcalendar into the window’s DIV. I prefer this approach for several reasons: sometimes developers destroy windows after each use, it makes more sense to me to create window assets (div for the calendar) near the creation of the window, I create the calendar only if the user cares to view it, …

I hope this helps.