Question

I need to render the events as HTML tables after an AJAX call is made. I’m getting the table HTMLS when it is success. But when the it is rendered in title, it is displaying the table HTMLS as normal text. When I googled it I found a solution that I need to use the below code to render it as HTMLS:

eventRender: function (event, element) {
element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
}); 

But when I put it in my code, it’s showing some JS error. I don’t know why this error is happening. Please help me to figure out. Please find the full section of that code below:

  dayClick: function(start,allDay, jsEvent, view) {
   $('#calendar').fullCalendar('changeView', 'agendaDay');
  var date_clicked = $.fullCalendar.formatDate( start, "yyyy/MM/dd");
  var date_for_view = Date.parse(date_clicked);
  var date_for_view=new Date(date_for_view);
  $('#calendar').fullCalendar( 'gotoDate',date_for_view );
  $.ajax({
      url: "/admins/users/update_projects?date_selected="+date_clicked+"&uid="+'<%=params[:user]%>',
      type: 'GET',
      success: function (data, response, event, date) {
           $('#calendar').fullCalendar('renderEvent',
              {
                title: data,
                start: start
              },
      eventRender: function (event, element) 
              {
               element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());           
              }); },
      error: function () {
          $('#calendar').fullCalendar('renderEvent',
              {
                title: "No Tasks Scheduled Today",
                start: date_clicked              
              });      
               }
            });
  },

Answer 1

You should add the eventRender callback to the code where you initialize the calendar

// create fullCalendar
$('#calendar').fullCalendar({
    eventRender: function(event, element, view) {
         if (view.name == 'agendaDay') {
              element.find('span.fc-event-title').html(element.find('span.fc-event-title').text());
         }
    }
});

In the Ajax response, just call the renderEvent method and pass an event as a second argument

//call the render event method
$('#calendar').fullCalendar('renderEvent', {
       title: 'My Event 2',
       start: '2012-11-25'
});

Working example: http://jsfiddle.net/bfz3J/1/