Add font awesome icon to full calendar title

Question

I'm using wordpress, formidable forms and full calendar to create a bespoke calendar solution

I have everything working except for I'd like to add a font awesome icon at the front of each title in the calendar.

If I add any html in the title like my code below I just see the code printed and not the final results.

$('#calendar').fullCalendar({
    events: [
        {
            title  : '<i class="fa fa-asterisk"></i>event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09T12:30:00',
            allDay : false // will make the time show
        }
    ]
});

Could any of you point me in the right direction?? :-)

Regards

Matt

Answer 1

if you want to replace a text with icon, you can use below code

eventRender: function(event, element) {
   element.find(".fc-title").html(function () { return $(this).html().replace("Rs", "<i class='fa fa-inr'></i>")});
}

Answer 2

With fullcalendar V4 my render looks like this

json title with $ICON as placeholder:

{
  start: date
  title: '$ICON custom_name'
  img: 'fontawesome-icon-name'
}

eventRender: function(info) {
  info.el.innerHTML = info.el.innerHTML.replace('$ICON', "<em class='far fa-"+info.event.extendedProps.img+"'></em>");
}

Cheers Hannes

Answer 3

You can modify the title prepending font-awesome icon inside the eventRender function.

I added one option with key icon: if icon is defined appends fontawesome icon in the eventRender function.

Check this example:

$('#calendar').fullCalendar({
  events: [
    {
        title  : 'event1',
        start  : '2015-10-01',
        icon : "asterisk" // Add here your icon name
    },
    {
        title  : 'event2',
        start  : '2015-10-05',
        end    : '2015-10-07'
    },
    {
        title  : 'event3',
        start  : '2015-10-09T12:30:00',
        allDay : false // will make the time show
    }
],
eventRender: function(event, element) {
     if(event.icon){          
        element.find(".fc-title").prepend("<i class='fa fa-"+event.icon+"'></i>");
     }
  }        
})

Answer 4

Had the same issue with the FullCalendar 4.3.1. Hope it helps.

eventRender: function (info) {
    let icon = info.event.extendedProps.icon;
    let title = $(info.el).first('.fc-title-wrap');
    if (icon !== undefined) {
        title.prepend("<i class='" + info.event.extendedProps.icon + "'></i>");
    }
}