title: Integrate fullcalendar with extjs
body: <p>I am trying to display the excellent fullcalendar in an extjs window that has loaded in response to a button click.</p>
  
  <p>I can get the calendar to display in the window as follows:</p>
  
  <p>//  .. grid config..</p>
  
  <pre><code>    //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
  </code></pre>
  
  <p>and in my default.ctp view:</p>
  
  <pre><code>&lt;!--Set placeholder for jquery fullcalendar called from events grid tbar button--&gt;
  &lt;!--I think - set 'items' property on Ext.window to 'calendar' div--&gt;
  &lt;div id="hello-win" class="x-hidden"&gt; 
      &lt;div class="x-window-header"&gt;Annual Leave Calendar&lt;/div&gt; 
          &lt;!--Placeholder for fullcalendar--&gt;
          &lt;div id="calendar"&gt;
  
              &lt;script type='text/javascript'&gt;
                  $(document).ready(function() {
                      $('#calendar').fullCalendar({});
              &lt;/script&gt; 
  
          &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Any help on this would be much appreciated.</p>