title: How can I render an event to fill the day element with fullcalendar
body: <p>Just wondering if anyone had a better way of setting the background of a whole day in fullcalendar js? The problem with my approach is that if you go to another page in the calendar, the table cell background remains altered. I could reset all  backgrounds on the fullCalendar('prev') event I guess but that seems messy. Anyone know of a way to render the actual event so that it expands to fill the whole day?</p>
  
  <pre><code>var trainingDiary = $("#training_diary").fullCalendar({
    dayClick: function(date, allDay, jsEvent, view) {
  
      var title = prompt('Event Title:');
      var dayObj = $(this);
      //console.log($(this));
      if (title) {
       $.ajax({
        url: "/app_dev.php/addtrainingday",
        global: false,
        type: "POST",
        data: "dayNo=" + date.getDate(), //returns day of month. getDay() returns day of week
        async:true,
        success: function(msg) {
  
                 trainingDiary.fullCalendar('renderEvent',
                  {
                    title: title,
                    start: date,
                    allDay: allDay,
                    backgroundColor:'#cccccc'
                  },
              true // make the event "stick" across calendar pages
            )
  
        dayObj.css({'background-color':'#339933','background-image':'url()'})
        console.log(msg.valueOf());
        } //end ajax success
       })
     } else {
        trainingDiary.fullCalendar('unselect');
     }
  
    },
    //selectable:true,
    //selectHelper:true,
    theme: true,
    header: {left:'title',
              center: '',
              right: 'today prev next'},
    firstDay:1
  
  });
  </code></pre>