Jquery 将字体图标添加到完整日历标题

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

我有一切工作，除了我想添加一个字体可怕的图标在每个标题在日历的前面

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

$（“#日历”）.fullCalendar({
活动：[
{
标题：“事件1”，
开始：“2010-01-01”
},
{
标题：“事件2”，
开始日期：“2010-01-05”，
完：2010-01-07
},
{
标题：“事件3”，
开始：“2010-01-09T12:30:00”，
全天：假//将显示时间
}
]
});您可以在eventRender函数中修改标题前置字体图标

我添加了一个带有键图标的选项：如果定义了图标，则在eventRender函数中附加一个图标

检查此示例：

$('#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>");
     }
  }        
})

$（“#日历”）.fullCalendar({
活动：[
{
标题：“事件1”，
开始：“2015-10-01”，
图标：“星号”//在此添加您的图标名称
},
{
标题：“事件2”，
开始：“2015-10-05”，
完：2015-10-07
},
{
标题：“事件3”，
开始：“2015-10-09T12:30:00”，
全天：假//将显示时间
}
],
eventRender:函数（事件，元素）{
if（event.icon）{
元素。查找（“.fc title”）。前缀（“”）；
}
}        
})
如果要用图标替换文本，可以使用以下代码

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

eventRender:function（事件，元素）{
element.find（“.fc title”）.html（函数（）{return$（this.html（）.replace（“Rs”，”）}）；
}
使用fullcalendar V4，我的渲染如下所示

以$ICON作为占位符的json标题：

{
  start: date
  title: '$ICON custom_name'
  img: 'fontawesome-icon-name'
}

eventRender:函数（信息）{
info.el.innerHTML=info.el.innerHTML.replace（“$ICON”，”）；
}

编辑：对于fullcalendar 5.x.x，我的方法有点不同，因为我只在前面添加图标，所以我不再需要$icon占位符

eventContent:function（args，createElement）{
const icon=args.event._def.extendedProps.img；
const text=“”+参数事件._def.title；
返回{
html：文本
};
},

干杯
Hannes对FullCalendar 4.3.1也有同样的问题。希望能有帮助

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

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

eventRender:函数（信息）{
让icon=info.event.extendedProps.icon；
让title=$（info.el）.first（'.fc title wrap'）；
如果（图标！==未定义）{
标题.前置（“”）；
}
}
与完整日历4.4有相同的问题。
我试着使用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>");
  }
}

eventRender:函数（信息）{
让icon=info.event.extendedProps.icon；
让title=$（info.el）.first（'.fc title wrap'）；
如果（图标！==未定义）{
标题.前置（“”）；
}
}

它解决了一个小问题：.fc title wrap删除了“time”

然后我从这里看到另一个答案，指向类“.fc title”，它可以工作，但不适用于FullCalendar 4.4中的listview

我使用了下面的代码，它适用于我，用于月视图、周视图、日视图和列表视图

正如你所看到的，这是基于我在这里找到的一些答案。
希望能有帮助

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

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

eventRender:function（info）{
让icon=info.event.extendedProps.icon；
//这适用于月、周和日视图
让title=$（info.el）.find（'.fc title'）；
//这是列表视图
让title_list=$（info.el）.find（'.fc列表项title a'）；
如果（图标）{
var micon=“ ”；
标题.预结束（米肯）；
标题列表前置（micon）；
} 
}
您可以在完整日历标题中添加字体可怕图标作为css内容（：在伪元素之前）

.fc标题：之前{
字体系列：“字体真棒5免费”；
内容：“\f274”；
显示：内联块；
右侧填充：3px；
字号：900；
}

根据您的要求添加css内容，目前使用的是
fa日历检查
图标内容。
您可以将
font-family
更改为
font-Awesome 5品牌
或
font-Awesome 5免费
需要在偶数渲染回调中预先设置它我还没有使用完整日历，但是如果它们都要使用相同的图标，您不能给它们所有相同的类别，然后使用“内容”吗css规则，并将其应用于：before或：after？@JonathanBowman谢谢，他希望根据类别的不同使用不同的图标。Charlietfl对FullCalendar&JQuery来说真的很陌生，所以我不确定你的意思，你能详细说明一下吗？@cesare你能看到这个吗@Mogambo我找不到页面@cesare