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

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 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>");
}

Edit: With fullcalendar 5.x.x, my approach is a little bit different and as I only add the icon at the front I don't need the $ICON placeholder anymore.

eventContent: function (args, createElement) {
  const icon = args.event._def.extendedProps.img;
  const text = "<em class='far fa-" + icon + "'></em> " + args.event._def.title;
  return {
    html: text
  };
},

Cheers Hannes

Answer 3

Had the same issue with Full Calendar 4.4. I tried to use the code from S.Poppic

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>");
  }
}

It works, but with a little issue: .fc-title-wrap removes the "time"

Then I see another answer from here that points to class '.fc-title' and it works, but not for the listview in FullCalendar 4.4

I used the following code and it worked for me, for month view, weekview, dayview and list view.

As you can see it is based on some of the answers I found here. Hope it helps.

 eventRender: function (info) {            
        let icon = info.event.extendedProps.icon;
        // this works for Month, Week and Day views
        let title = $(info.el).find('.fc-title');
        // and this is for List view
        let title_list = $(info.el).find('.fc-list-item-title a');
  
        if (icon) {
            var micon = "<i class='" + icon + "'></i>&nbsp";
            title.prepend(micon);
            title_list.prepend(micon);
        } 
  }


        

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>");
    }
}