我正在使用 WordPress、强大的表单和完整的日历来创建定制的日历解决方案
我一切正常,除了我想在日历中每个标题的前面添加一个很棒的字体图标。
如果我在标题中添加任何 html(如下面的代码),我只会看到打印的代码,而不是最终结果。
$('#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
}
]
});
你们中有人能指出我正确的方向吗? :-)
问候
马特
您可以在 eventRender 函数中修改标题前面的 font-awesome 图标。
我添加了一个带有钥匙图标的选项:如果定义了图标,则会在 eventRender 函数中附加 fontawesome 图标。
检查这个例子:
$('#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 V4 我的渲染看起来像这样
json 标题,以 $ICON 作为占位符:
{
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>");
}
编辑:对于 fullcalendar 5.x.x,我的方法有点不同,因为我只在前面添加图标,所以我不再需要 $ICON 占位符。
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
};
},
干杯 汉内斯
完整日历 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>");
}
}
它可以工作,但有一个小问题:.fc-title-wrap 删除了“时间”
然后我从这里看到另一个答案,它指向类“.fc-title”并且它有效,但不适用于 FullCalendar 4.4 中的列表视图
我使用了以下代码,它对我有用,适用于月视图、周视图、日视图和列表视图。
如您所见,它是基于我在这里找到的一些答案。 希望有帮助。
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);
}
}
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>");
}
}
您可以在fullcalendar标题中添加字体真棒图标作为css内容(:在伪元素之前)
.fc-title:before {
font-family: "Font Awesome 5 Free";
content: "\f274";
display: inline-block;
padding-right: 3px;
font-weight: 900;
}
根据您的要求添加css内容,目前使用
fa-calendar-check
图标内容。
您可以将 font-family
更改为 Font Awesome 5 Brands
或 Font Awesome 5 Free
如果你想用图标替换文本,你可以使用下面的代码
eventRender: function(event, element) {
element.find(".fc-title").html(function () { return $(this).html().replace("Rs", "<i class='fa fa-inr'></i>")});
}
感谢您的解决方案..我被困了一个星期,在阅读了您的帖子后终于完成了..