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, 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?

Adding multiple posts of the same question wont help your chances of finding an answer :) http://stackoverflow.com/questions/3408723/display-more-text-in-fullcalendar — Jake1164, Aug 05 '10 at 13:29
Not exactly the same questions. It can be useful to have 2 questions asked differently about the same topic. They can simply be related and It increases chances for searchers and answerers to find one of them. — Pierre de LESPINAY, Sep 13 '13 at 12:18

score 57 · Answer 1 · edited May 23 '17 at 11:54

57

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 .

edited May 23 '17 at 11:54

Community

1
1

answered Feb 18 '13 at 07:23

Giancarlo Gomez

691
6
4

1

this works for all views month, week and day. This should be the right answer. – Dan Carter Apr 26 '13 at 04:23
1

Yes, this is a great solution. I use this method to insert two on the top right corner of the title. And use these "button" to delete and edit the event itself. – superpuccio May 08 '14 at 14:56
2

I used `eventAfterRender` instead to get this working for FullCalendar 2.0.2 – pierrea Aug 17 '14 at 12:05
7

The css class has changed in v2: element.find('.fc-title').html(event.title); – j00lz Jan 27 '15 at 07:38
Is there a reason not to use `event.title` in the v2 code? – Ken Wayne VanderLinde Dec 10 '15 at 22:29
@Ken Wayne VanderLinde I'm using event.title on v2.6 and works fine here. – Paul Phillips Apr 06 '16 at 19:03

score 23 · Answer 2 · answered Apr 27 '15 at 21:18

23

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

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

answered Apr 27 '15 at 21:18

Pascal Klein

23,665
24
82
119

Thanks for sharing it. It works in version 3 as well. – Umar Niazi Aug 20 '19 at 05:30

score 14 · Answer 3 · answered Oct 27 '11 at 15:33

14

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

answered Oct 27 '11 at 15:33

jhanifen

4,441
7
43
67

Do I add this to the calendar instantiation or as a property of the event that I'm rendering? – Kellen Stuart Feb 16 '17 at 20:28

score 3 · Answer 4 · answered May 28 '18 at 06:04

3

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

answered May 28 '18 at 06:04

Ashi

409
3
12

score 2 · Answer 5 · answered Jan 07 '11 at 02:48

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.

score 0 · Answer 6 · answered Mar 24 '18 at 06:11

0

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

answered Mar 24 '18 at 06:11

Sanil Shrestha

1
1

HTML in title string of fullcalendar jquery plugin

6 Answers6

Linked