将字体真棒图标添加到完整的日历标题
Posted
技术标签:
【中文标题】将字体真棒图标添加到完整的日历标题【英文标题】：Add font awesome icon to full calendar title 【发布时间】：2016-01-22 00:12:39 【问题描述】：我正在使用 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
]
);你们谁能指出我正确的方向吗？ :-)
问候
马特
【问题讨论】：
需要在偶数渲染回调中添加它 我没有使用完整的日历，但是如果他们都将使用相同的图标，你不能给他们所有相同的类，然后使用“内容”css规则并应用它在 :before 或 :after? @JonathanBowman 谢谢，希望根据类别提供不同的图标。 Charlietfl 对 FullCalendar 和 JQuery 真的很陌生，所以不确定你的意思，你能详细说明一下吗？ 【参考方案1】：您可以在 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>");
)
【讨论】：
@cesare 你能看到这个吗？ ***.com/questions/47525190/… @Mogambo 我不能“找不到页面” @cesare ***.com/questions/47527202/…【参考方案2】：使用 fullcalendar V4 我的渲染看起来像这样
以 $ICON 作为占位符的 json 标题：
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
;
,
干杯 汉内斯
【讨论】：
我正在使用 fc 5。eventContent 有效，但如何添加开始时间。试过 args.event._def.start。不返回任何东西。 args.event.start 返回开始日期，但格式错误。我只是想让开始看起来像默认值。 9便士。我将收到 2021 年 8 月 13 日星期五 19:40:00 GMT-0400（东部夏令时间）。我是否必须运行一个函数来改变它，或者我错过了什么。【参考方案3】：Full Calendar 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);
【讨论】：
【参考方案4】：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>");
【讨论】：
【参考方案5】：如果你想用图标替换文本，你可以使用下面的代码
eventRender: function(event, element)
element.find(".fc-title").html(function () return $(this).html().replace("Rs", "<i class='fa fa-inr'></i>"));
【讨论】：
【参考方案6】：您可以在全日历标题中添加字体真棒图标作为css内容(:before Pseudo-element)
.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
【讨论】：
以上是关于将字体真棒图标添加到完整的日历标题的主要内容，如果未能解决你的问题，请参考以下文章