title: Populating a calendar with information
body: <p>I am using the following jQuery calendar: <a href="http://www.htmldrive.net/items/show/568/astonishing-iCal-like-calendars-with-jQuery" rel="nofollow">http://www.htmldrive.net/items/show/568/astonishing-iCal-like-calendars-with-jQuery</a></p>
  
  <p>I'd like to populate it using the following query:</p>
  
  <pre><code>public function get_upcoming_events()
  {
      $query = "SELECT * FROM events
              WHERE date &gt;= NOW()
              ORDER BY date ASC";
  
      return DB::get_results($query);
  }
  </code></pre>
  
  <p>I've set out to populate the popup boxes with event information in a similar format to this.</p>
  
  <pre><code>    echo '&lt;li&gt;&lt;span class="title"&gt;'.date('n/j/Y', strtotime($event-&gt;date)).' - '.$event-&gt;title.'&lt;/span&gt;';
      echo '&lt;span class="desc"&gt;&lt;a href="'.SITE_URL.'/index.php/events/get_event?id='.$event-&gt;id.'"&gt;Click here for details and to sign up...&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;';
  </code></pre>
  
  <p>I have now downloaded an extension for this: <a href="https://github.com/MrHus/jquery-monthly-ical/tree/" rel="nofollow">https://github.com/MrHus/jquery-monthly-ical/tree/</a> Following the documentation I've changed this:</p>
  
  <pre><code>$(document).ready(function()
  {   
      $("#ical").ical({
  
      eventdates: [{"date": "2009-03-21", "title": "My birthday", "desc": "Its my birthday!"},
                   {"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"},
                   {"date": "2009-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                   {"date": "2010-mm-01", "title": "New Month", "desc": "First day of the new month!"},
                   {"date": "2010-09-01", "title": "Convention", "desc": "September convention."}, 
                   {"date": "2010-09-02", "title": "Convention", "desc": "September convention day two."}, 
                   {"date": "2010-mm-01", "title": "Towl", "desc": "Dont forget to bring a towl."}    
                  ]                   
  });
  </code></pre>
  
  <p>To this:</p>
  
  <pre><code>$(document).ready(function()
  {   
      $("#ical").ical({
  
                          &lt;?php
                          foreach($events as $event)
                          {
                          ?&gt;
                          eventdates: [{"date": "&lt;?php date('Y/m/d') ?&gt;", "title": "&lt;?php $event-&gt;title ?&gt;", "desc": "Its my birthday!"},
                                       {"date": "yyyy-01-01", "title": "New Year", "desc": "Its a new year!"},
                                      ]
                          &lt;?php
                          }
                          ?&gt;                 
  });
  </code></pre>
  
  <p>How do I populate the popup boxes calendar with the above?</p>