HTML in title string of fullcalendar jquery plugin

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, for example bold text, colors, or small images.

The solution with another plugin (for example qTip, like in the examples) will not work the right way for me. Is there anyway to format the title text?

Giancarlo Gomez

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 .

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

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

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

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.

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*/
}

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

来源：https://stackoverflow.com/questions/3410157/html-in-title-string-of-fullcalendar-jquery-plugin

标签

jquery

fullcalendar