Add awesome icon font to full calendar title

Question

I use Wordpress, formidable forms and a complete calendar to create a custom calendar solution

Everything works for me, except that I would like to add the awesome icon font at the beginning of each title in the calendar.

If I add any html to the header like my code below, I just see that the code is 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 } ] }); 

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

Hello

Matt

Answer 1

You can change the title that adds the font - an awesome icon inside the eventRender function.

I added one parameter with a key icon: if an icon is defined, it adds a font-size icon in the eventRender function.

Check out 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

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

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