title: jQuery CLNDR: add div within date block
body: <p>I'm currently using the CLNDR plugin: <a href="http://kylestetz.github.io/CLNDR/" rel="nofollow">http://kylestetz.github.io/CLNDR/</a> a great little jQuery plugin for producing calendars. Ideally I'm looking to use the calendar as an events calendar, i.e. if you add an event to a specific date, it will add the relevant info to that date block. <br>I currently have this jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/32EEF/" rel="nofollow">http://jsfiddle.net/neal_fletcher/32EEF/</a> <br>Where by default, the events in array are styled with a different background color. Ideally what I want to add a div within the <code>.day</code> div that contains an event, containing the event title, info etc etc. Nothing too fancy, just something more than changing the background color. Is this at all possible? Any suggestions would be greatly appreciated!
  <br>
  jQuery:</p>
  
  <pre><code>$(document).ready( function() {
  
    // here's some magic to make sure the dates are happening this month.
    var thisMonth = moment().format('YYYY-MM');
  
    // Here's our events array. We could grab this via AJAX as well.
    var eventArray = [
      { date: thisMonth + "-24 07:52", title: "This is an event title", url: "http://google.com", time: "7:15PM" },
      { date: thisMonth + "-28", title: "the 28th, Part 1", url: "http://www.google.com" },
      { date: thisMonth + "-28", title: "the 28th, Part 2", arbitraryObject: 42 },
      { date: thisMonth + "-16", title: "Another title", anotherObject: "clndr exposes whatever is in your event object" }
    ];
  
    var clndr2 = $('.cal2').clndr({
      template: $('#template-calendar').html(),
      events: eventArray,
      startWithMonth: moment().add('month', 0),
      clickEvents: {
        click: function(target) {
          console.log(target);
        }
      }
    });
  
    // bind both clndrs to the left and right arrow keys
    $(document).keydown( function(e) {
      if(e.keyCode == 37) {
        // left arrow
        clndr1.back();
        clndr2.back();
      }
      if(e.keyCode == 39) {
        // right arrow
        clndr1.forward();
        clndr2.forward();
      }
    });
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="container"&gt;
  
        &lt;h3&gt;&lt;/h3&gt;
  
      &lt;div class="cal2"&gt;
        &lt;script type="text/template" id="template-calendar"&gt;
          &lt;div class="clndr-controls"&gt;
            &lt;div class="clndr-previous-button"&gt;&amp;lsaquo;&lt;/div&gt;
            &lt;div class="month"&gt;&lt;%= month %&gt;&lt;/div&gt;
            &lt;div class="clndr-next-button"&gt;&amp;rsaquo;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clndr-grid"&gt;
            &lt;div class="days-of-the-week"&gt;
              &lt;% _.each(daysOfTheWeek, function(day) { %&gt;
                &lt;div class="header-day"&gt;&lt;%= day %&gt;&lt;/div&gt;
              &lt;% }); %&gt;
              &lt;div class="days"&gt;
                &lt;% _.each(days, function(day) { %&gt;
                  &lt;div class="&lt;%= day.classes %&gt;" id="&lt;%= day.id %&gt;"&gt;&lt;%= day.day %&gt;&lt;/div&gt;
                &lt;% }); %&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/script&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>