18

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

Matthew Barraud
  • 467
  • 1
  • 5
  • 17
  • need to prepend it in the even render callback – charlietfl Oct 22 '15 at 16:31
  • I haven't used full calendar, but if they're all going to use the same icon couldn't you just give them all the same class and then use the "content" css rule and apply it in a :before or :after? – Jonathan Bowman Oct 22 '15 at 18:14
  • @JonathanBowman thanks, was hoping for different icons depending on category. Charlietfl am really new to FullCalendar & JQuery so not sure what you mean, could you elaborate? – Matthew Barraud Oct 22 '15 at 18:26

6 Answers6

39

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>");
     }
  }        
})
cesare
  • 2,098
  • 19
  • 29
  • @cesare can you see this? https://stackoverflow.com/questions/47525190/eventrender-in-fullcalendar-not-running –  Nov 28 '17 at 06:31
  • @Mogambo I can't "Page not found" – cesare Nov 28 '17 at 10:38
  • @cesare https://stackoverflow.com/questions/47527202/changing-the-position-of-img-inside-fc-content-fullcalendar#47527634 –  Nov 28 '17 at 10:45
7

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

  • I am using fc 5. the eventContent works, but how can I add the start time. Tried args.event._def.start. Does not return anything. args.event.start returns the start date but in the wrong format. I just want the start to look like the default. 9p. I am getting Fri Aug 13 2021 19:40:00 GMT-0400 (Eastern Daylight Time). Do I have to run a function to change this, or am I missing something. – pcm70 Jul 17 '21 at 14:31
6

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


        
Jorge Paredes
  • 61
  • 1
  • 3
3

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>");
    }
}
spopic
  • 92
  • 11
2

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

Sergey Shubin
  • 3,040
  • 4
  • 24
  • 36
Sushant B
  • 21
  • 2
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>")});
}
Ivan Chernykh
  • 41,617
  • 13
  • 134
  • 146
Saran
  • 358
  • 4
  • 9