CODEWITHSUNDEEP
fullcalendar
codecowboy
codecowboy

Reputation: 10095

How can I render an event to fill the day element with fullcalendar

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?

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

});

Upvotes: 1

Views: 5615

Answers (1)

codecowboy
codecowboy

Reputation: 10095

looks like this can be done with the eventRender() callback. http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/

Upvotes: 1

Related Questions