Render HTMLS tags in events of fullcalendar.js

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              
              });      
               }
            });
  },

Answers


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/


on the lastest version of FullCalendar (v2.6.1) I had issues getting the html to display in agendaWeek and agendaDay. This worked for me:

  eventRender: function(event, element, view) {
    if (view.name === 'month') {
      element.find('span.fc-title').html(element.find('span.fc-title').text());
    } else if (view.name === 'agendaWeek' || view.name === 'agendaDay') {
      element.find('div.fc-title').html(element.find('div.fc-title').text());
    }
  },

@i123fr3's technique is still relevant, but because of modifications to fullcalendar's HTML, it no longer works. The HTML generated by fullcalendar uses div for .fc-event-title now, and not a span.

Change the eventRender implementation to:

if (view.name == 'agendaDay') {
  element.find('.fc-event-title').html(element.find('.fc-event-title').text());
}

my solution on both types of events (less of half hour and more the half hour)

eventRender: function (event, element)
            {
                //hack for view html(not as text)
                element.find('.fc-event-title').html(element.find('.fc-event-title').text());
            },
eventAfterAllRender:function( view ) {
                $('.fc-event-time').each(function(){
                    $(this).html($(this).text());
                });
            },

Need Your Help

SetFocus to a textbox wpf

wpf textbox setfocus

I want to set focus to a textbox always. I am creating a application in wpf, in the search page there is a textbox i want to set focus to that textbox always, if the user clicks anywhere in the pa...