Fullcalendar: Easy way to get HTML into an event title

[blag001]

Hi there,
I'm using fullcalendar (nice work~) and find what it seem to be a missing function.
When you put html in the event title, it'll always be html-escaped, I understand it's the best default way, as some title may contain some html char and user input that should be bulletproof .

But why you don't have put an (bool) textEscape {default : TRUE} option in Event Source Object ?
(and in Event Object to as it's the same)

I'm a big boy, I'm able to deal with htmlEscape by myself and I think I'm not the only one here... (i've found many issue about html in title on google)
But having to use an ugly hook with eventRender just to put a span for a glyphicons seem to be a bit overkill for me...

Tanks,
Blag

TL;DR :

• adding option (bool) textEscape {default : TRUE} on Event Source Object and Event Object
• dealing with this kind of data :

{
    "events": [
        {
            "title": "<b>Event in bold</b> 1",
            "start": "2011-04-04"
        },
        {
            "title": "<span class=""glyphicons""></span> Event with glyphicons",
            "start": "2011-05-05"
        }
        // etc...
    ],
    "textEscape": false,   // new option to disable the auto escape
    "color": "yellow",   // an option!
    "textColor": "black" // an option!
}

or

{
    "events": [
        {
        "title": ">> Event  escaped",
        "start": "2011-04-04"
        },
        {
            "title": "<span class=""glyphicons""></span> Event with HTML !",
            "start": "2011-05-05",
            "textEscape": false   // new option to disable the auto escape
        }
        // etc...
        ],
    "color": "yellow",   // an option!
    "textColor": "black" // an option!
}

[rePhat]

You can actually use http://fullcalendar.io/docs/event_rendering/eventRender/ to render your HTML title. Thats the way I'm doing it (also for adding icons). Hope this helps :)

[blag001]

Yes, I use it to, like I said : But having to use an ugly hook with eventRender just to put a span for a glyphicons seem to be a bit overkill for me...

I just ask to make an official way to put html, without triggering a hook on every event just to put a span on 3 of them...

Forcing escape is like forcing the php magic quote for me, useful for beginner [I'll not say noob but nearly] but such a pain when your are a bit more skilled and able to deal with it by yourself.
And if we take a look, even PHP now disable default magic-quote.

[arshaw]

the issue i have with this is more of a philosophical one. if you include HTML in your event data, you are all of a sudden mixing your data layer with your presentation layer.

I'd rather tackle #1009 to help you achieve what you want, specifically for icons. more semantic

[blag001]

HTML is structural, not a presentation layer at all (this is CSS), it's data on data, it's like saying meta-data are not data...

So yes, it's should be allowed for user who want to use it in title (and the use of the option like I suggest, by default, won't change anything).

I work with CakePhp framework, and every helper that auto-escape content allow you to disable-it. If you need to tell navigator that a part of the link is more/less important than the other, you'll need to put html in it and hopefully you'll not have to make a JS hook to change it on the fly (which is against every good SEO).
I think it's the same in JS, you shouldn’t need to make a second change on the fly to get your final data (and I _really_ don't like the performance cost of this second fly to be honest).

BTW, if we speak about mixing data layer with presentation layer on Event Object : textColor, borderColor, backgroundColor and color are way more against it that a bit of structural html...

Regards,
blag

[arshaw]

You bring up a good point. The thing that weirds me out is the meta-data aspect. The event data containing another type of data that is specific to one particular type of rendering engine (a web browser). Maybe I'm over-abstracting, but it'd be cool if the FullCalendar event data format was something beyond what a JavaScript plugin needs. Similar to what iCalendar aims to be. It could be accepted by an iOS implementation of FullCalendar for example (a different type of rendering engine). In that case this alternative client could make use of presentational properties, like textColor but interpretation is up to the client. It would be awkward to try to render HTML in a non-browser setting. Maybe iOS has these capabilities, but beside the point.

I was curious what the iCalendar spec does. They do not offer a standard way to specify HTML within an event title or description. However, a "calendar extension" seems to have evolved to accommodate this. See X-ALT-DESC:
https://en.wikipedia.org/wiki/ICalendar

I'm all about being pragmatic however... if people are struggling to get around this limitation by introducing some other type of non-standard property with HTML in it, that defeats the point. And implementing this is pretty easy. I'll get this in an upcoming release.

[arshaw]

this will likely be another property name altogether, rather than a flag. will probably be titleHtml

[blag001]

Ok, I now understand better your point (agnostic data).
But yes, as you are working on a JS implementation, I think it's not a good idea to avoid an html support.
titleHtml seem nice to me, it's like the way you deal with email (one content in html and another in plain/txt)
Thanks again,
Blag

[RafaelVidaurre]

Any updates on this?

[perkins2099]

Also curious about this one. :)

[gusreyes01]

This function would be useful to me too.

[arshaw]

no update, but if you need a workaround, eventRender is there for you

[danhnguyeen]

eventRender: function( event, element, view ) {
       element.find('.fc-title').prepend('<span class="glyphicon"></span> '); 
}

[tyrann0us]

If you already got HTML in the title you could do something like this:

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

[githubjeka]

eventRender doesn't work for list views
To fix

eventRender: function( event, element, view ) {
        var title = element.find('.fc-title, .fc-list-item-title');          
        title.html(title.text());
},

[nicolas15000]

Hello, this is my getting all rendez vous function 👍

function getAllRendezVous(){

        $scope.eventSources.splice(0, $scope.eventSources.length);// REINIT 

        rdvFactory.get_rdvs().then(function(data){ 

            var temp = data.data;

            angular.forEach(temp,function(value,index){

                          temp[index]["title"] = temp[index]["title"]+'<span> <i class="fa fa-users" aria hidden="true"></i> -- Juristes:'+temp[index]["nbjuristes"];

            }); 

        $scope.eventSources = angular.copy([data.data]);    

        })
    }

The html is not rendered inside the titles, i'm using angular JS , this is my rendering function 👍 👍

>    /* Render Tooltip */
>   $scope.eventRender = function( event, element, view ) { 
>             var title = element.find( '.fc-title' );
>           title.html( title.text() );
>           element.find('.fc-title').prepend('<span class="glyphicon"></span> '); 
                console.log(event); 
>             $compile(element)($scope);
>     };  

As you can see, i 've tried plenty of things, but , my "fa fa-users" icon still doesn't appear nor HTML !

PLEASE HELP !

[billfranklin]

status of this?

[fra-gadio]

@billfranklin 'trangchuvn' and 'tyrann0us' solutions are working for me.

[maieul]

It seems me that it should be a native feature, as @blag001 explained.

[matthewford]

I needed to do this in eventAfterRender

[tcurtin]

As a comment - the suggested element.find('.fc-title') does not work for list views, which have class fc-list-item-title ui-widget-content instead of fc-title ui-widget-content. The following will find those as well:

element.find('[class*=-title]')

(the *= is important because the class selectors don't work on individual classes as you might expect, but the full list of classes as a string, so $= will fail.)

[Ahmad2323]

HI everyone, i am facing issue in fullcalendar. when i fetch the data from db , events.push event assighning undefined value to the fields. while json data come from db in correct format. Please help me to sort out this issue. Thanks

var events = [];
$.ajax({
url: "schedule.aspx/GetDataCustomer",
type: "POST",
dataType: "json",
cache: false,
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (i, v) {
events.push({
id: v.sch_id,
title: v.Subject,
description: v.Description,
start: moment(v.Start).format('YYYY-MM-DD'),
end: moment(v.End).format('YYYY-MM-DD'),
Lunch_S: v.Lunch_Start,
Lunch_E: v.Lunch_End,
color: v.ThemeColor,
allDay: v.IsFullDay
});
})

[deepaselvam]

how can i create a calendar event using javascript

[amitshahc]

using html: true solved my problem.
in boostrap popover attribute use data-html="true"

eventRender: function (eventObj, $el) {
                    $el.popover({
                        title: eventObj.title,
                        content: eventObj.description,
                        trigger: 'hover',
                        placement: 'top',
                        container: 'body',
                        html: true
                    });
                }

[paulpgm]

I need HTML in the title to support multiple links within it. It would me to have the titleHTML feature implemented.
I implemented this in v4 by adding htmlTitle to the events within my json feed. This creates an extended property which I then place in the element while rendering.

eventRender: function(info) {
    if ("htmlTitle" in info.event.extendedProps)
        info.el.firstChild.innerHTML = info.event.extendedProps.htmlTitle;
}

[BernhardK91]

eventRender: function(info) {
  if ("htmlTitle" in info.event.extendedProps)
      info.el.firstChild.innerHTML = info.event.extendedProps.htmlTitle;
}

I have used the Idea from @paulpgm but there was a problem, wenn opening the list-view (wrong column got the title). So I used @paulpgm 's idea and extended it a little bit:

if ("htmlTitle" in info.event.extendedProps) {
    if(info.el.getElementsByClassName('fc-title').length > 0) {
        info.el.getElementsByClassName('fc-title')[0].innerHTML = info.event.extendedProps.htmlTitle;
    }
    if(info.el.getElementsByClassName('fc-list-item-title').length > 0) {
        info.el.getElementsByClassName('fc-list-item-title')[0].innerHTML = info.event.extendedProps.htmlTitle;
    }
}

Perhaps it helps anybody. :-)

[HarveyEV]

Yeah so I had the same issue inserting icons in the event title. I just passed a class to the parent fc-event and created a pseudo-element for the class. Worked like a charm after screwing with the layout. No event render required.

[NahuBocco]

Hi! if you are using Angular, try this:

eventRender(e){ e.el.querySelectorAll('.fc-title')[0].innerHTML = e.el.querySelectorAll('.fc-title')[0].innerText; }

and in your HTML

<full-calendar (eventRender)="eventRender($event)"></full-calendar>

[deepkesh26]

I need HTML in the title to support multiple links within it. It would me to have the titleHTML feature implemented.
I implemented this in v4 by adding htmlTitle to the events within my json feed. This creates an extended property which I then place in the element while rendering.

eventRender: function(info) {
  if ("htmlTitle" in info.event.extendedProps)
      info.el.firstChild.innerHTML = info.event.extendedProps.htmlTitle;
}

It works for me I have modified a little bit for my usage.

eventRender: function (info) { if ("htmlTitle" in info.event.extendedProps) { info.el.setAttribute("title",info.event.extendedProps.htmlTitle); } },

[jayakrishnan-m]

Try eve.el.innerHTML = eve.el.innerText; .
Works on angular

[arshaw]

as of v5 (which has just been released), there's a much easier way to do this now.

demo: https://codepen.io/arshaw/pen/ExPXjpY?editable=true&editors=001

useful links:
https://fullcalendar.io/docs/event-render-hooks
https://fullcalendar.io/docs/content-injection

[pepijndik]

I saw it super easy.Really nice that you have implemented this feature!!I love it!!Op 24 jun. 2020 16:39 schreef Adam Shaw [e-mail]:
as of v5 (which has just been released), there's a much easier way to do this now.
demo: https://codepen.io/arshaw/pen/ExPXjpY?editable=true&editors=001
useful links:
https://fullcalendar.io/docs/event-render-hooks
https://fullcalendar.io/docs/content-injection

—You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.

[Cris200992]

But now on v5 if you change with eventcontent and you have a lot of resources the text will be out of event. could we change it like with event render in other versions?

[pepijndik]

@Cris200992
I have got the same issue
Used the Vertical Resource view on a large screen it looks ok. but when the screen is smaller Characters are getting out of the events. but when i used the old way of settings text into a event the event prop gets resized.

In the pictures i have blacked out user data like names
Smaller screeen pic:

Larger screen: