title: jQuery Mobile + FullCalendar - need to refresh page to see it
body: <p>Having an issue with the FullCalendar plugin for jQuery Mobile. Basically, if I load the page, the calendar doesn't know.. but if I reload the page, it does. From what I've read, it seems that on jQuery mobile only loads data inside data-role="page. If I set the link to the page as data-ajax="false", it works fine, but I want to keep ajax.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt; 
  &lt;title&gt;My Page&lt;/title&gt; 
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
  
  &lt;script type='text/javascript' src='js/fullcalendar.min.js'&gt;&lt;/script&gt;
  &lt;link rel='stylesheet' type='text/css' href='css/fullcalendar.css' /&gt;
  &lt;script type='text/javascript'&gt;
  
  $(document).ready(function() {
  
      var date = new Date();
      var d = date.getDate();
      var m = date.getMonth();
      var y = date.getFullYear();
  
      $('#calendar').fullCalendar({
          editable: true,
          events: [
              {
                  title: 'All Day Event',
                  start: new Date(y, m, 1)
              },
              {
                  title: 'Long Event',
                  start: new Date(y, m, d-5),
                  end: new Date(y, m, d-2)
              },
              {
                  id: 999,
                  title: 'Repeating Event',
                  start: new Date(y, m, d-3, 16, 0),
                  allDay: false
              },
              {
                  id: 999,
                  title: 'Repeating Event',
                  start: new Date(y, m, d+4, 16, 0),
                  allDay: false
              },
              {
                  title: 'Meeting',
                  start: new Date(y, m, d, 10, 30),
                  allDay: false
              },
              {
                  title: 'Lunch',
                  start: new Date(y, m, d, 12, 0),
                  end: new Date(y, m, d, 14, 0),
                  allDay: false
              },
              {
                  title: 'Birthday Party',
                  start: new Date(y, m, d+1, 19, 0),
                  end: new Date(y, m, d+1, 22, 30),
                  allDay: false
              },
              {
                  title: 'Click for Google',
                  start: new Date(y, m, 28),
                  end: new Date(y, m, 29),
                  url: 'http://google.com/'
              }
          ]
      });
  
  });
  
  &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  &lt;div data-role="page"&gt;
  
  &lt;div data-role="header"&gt;
      &lt;a href="#" data-rel="back"&gt;Back&lt;/a&gt;
      &lt;h1&gt;My Team&lt;/h1&gt;
  
      &lt;div data-role="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="team.html"&gt;Team&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="schedule.html"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="reset.html"&gt;Reset&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /navbar --&gt;
  
  &lt;/div&gt;&lt;!-- /header --&gt;
  
  &lt;div data-role="content"&gt;       
      &lt;div id='calendar' style="width:100%;"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  
  &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>