HTML in title string of fullcalendar jquery plugin

Question

I think the fullcalendar jquery-plugin is a really great solution. However, I noticed the plugin escapes (htmlEscape) the title. But I need to format some strings in the title,

Answer 1

Because the CSS class has changed, this is the correct answer:

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

Answer 2

I have done like this, Check the link Link

eventRender: function (event, element) {
    element.find('.fc-title').html(event.title);/*For Month,Day and Week Views*/
    element.find('.fc-list-item-title').html(event.title);/*For List view*/
}

Answer 3

To easily have all html in event titles show I used this, makes it very easy.

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

Which was found here http://code.google.com/p/fullcalendar/issues/detail?id=152

Answer 4

        eventRender: function (event, element) {
            element.find('.fc-title, .fc-list-item-title').html("<b>"+event.title+"</b>");
        },

Answer 5

I did this instead as the other views use the same class but not spans and I forced in the title from the event rather than making an additional request for the text.

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

---

In v2, you may use:

element.find('span.fc-title').html(element.find('span.fc-title').text());

The span class is fc-title as opposed to fc-event-title.

Credit to j00lz for the comment confirming the change .

Answer 6

I ended up doing something like this to put a link next to the time. Something similar should work for the title:

    events: [
      <% @schedule.events.each do |event| %>
      {
        // Render your events here as needed
        // I added a custom attribute called eventDeleteLink, to be used below
      },
      <% end %>
    ],
    // Add this piece:
    eventRender: function(event, element) {
      element.find(".fc-event-time").append(" " + event.eventDeleteLink);
    }

So this uses jQuery's append() to add a space any a delete link after the time and it works fine for basic stuff.

What it didn't work for (and what I'd love to see a solution for, if anyone has one) is including code with nested quotes or double quotes. For instance, I was unable to add an onClick trigger because of the need (in my case) for single quotes within double quotes. I couldn't figure out how to escape them and not have (what I believe is) fullCalendar re-escaping them.

Anyway, for basic text, this worked for me.