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 i

Answer 1

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

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

You can add font awesome icon in fullcalendar title as css content (:before Pseudo-element)

.fc-title:before {
  font-family: "Font Awesome 5 Free";
  content: "\f274";
  display: inline-block;
  padding-right: 3px;
  font-weight: 900;
}

Add css content as per your requirement, currently fa-calendar-check icon content is used. You can change font-family to Font Awesome 5 Brands or Font Awesome 5 Free

Answer 4

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 5

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 6

Had the same issue with Full Calendar 4.4. I try 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 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);
        } 
  }