Add font awesome icon to full calendar title
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> ";
title.prepend(micon);
title_list.prepend(micon);
}
}
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
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>");
}
}
})