添加字体真棒图标到完整的日历标题 [英] Add font awesome icon to full calendar title

问题描述

我使用wordpress，强大的表单和完整的日历来创建定制的日历解决方案。

我有一切工作，除了我想添加一个字体真棒日历中每个标题前面的图标。

如果我在下面的代码中添加标题中的任何html，我只会看到打印的代码，而不是最终结果。

你们中的任何一个人能否指出我朝着正确的方向？ ： - ）

问候

Matt

解决方案

您可以在eventRender函数内修改标题预设font-awesome图标。

我添加了一个带有钥匙图标的选项：if icon定义在eventRender函数中附加fontawesome图标。

检查此示例：

  events：[
 {
 title：'event1'，
 start：'2015-10-01'， 
 icon：asterisk//在这里添加您的图标名称
}，
 {
 title：'event2'，
 start：'2015-10-05' ，
 end：'2015-10-07'
}，
 {
 title：'event3'，
 start：'2015-10-09T12：30： 00'，
 allDay：false //会让时间显示
} 
]，
 eventRender：function（event，element）{
 if（event.icon ）{
元素。 find（.fc-title）。prepend（< i class ='fa fa  - + event.icon +'>< / i>）; 
} 
} 
}）
  

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

解决方案

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

这篇关于添加字体真棒图标到完整的日历标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！