在事件的第一行添加图标(fullCalendar)
对于要在’fullCalendar’矩阵中显示的事件的特定属性,我想添加图标以显示它们,添加’完成’(i)按钮,或者在事件包含URL链接的情况下添加URL符号。
我不想将任何html字符串写入元素中的一个元素(fc-event-time / -title),但是要定义一个像这样的附加元素:
15:15 - 16:15
** ** Fri Dille
有什么帮助吗? 冈特
那么这个主题已经过时了,但是我在这里找不到如何用标签做到这一点所以我在这里留下另一种方式将图像放入fullcalendar事件中:
在eventObject
添加图像的路径。 如果你使用javascript,它将是这样的:
events: [ { title : 'event1', start : '2010-01-01', imageurl:'img/edit.png' }, { title : 'event1', start : '2010-01-01' }]
然后在eventRender
上放置图像:
eventRender: function(event, eventElement) { if (event.imageurl) { eventElement.find("div.fc-content").prepend(""); } },
如果要在所有项目上使用相同的图像,只需将其放在eventRender
:
eventElement.find("div.fc-content").prepend("");
您可以像这样搭载“eventRender”事件:
$("#YourCalendar").fullCalendar({ eventRender: function(event, element) { element.find(".fc-event-time").after($("").html("Whatever you want the content of the span to be")); } });
类似地,您可以将新元素附加到事件的DIV容器中的任何其他元素
一种可能的解决方案是:
myUtil.goCalendar(); // build calendar with all events // --- post process to add functionality to 'specific' events displayed // in the calendar matrix, eg. "completed" $("div.afc-completed").each(function(){ $(this).find('span.fc-event-time').addClass("afc-event-completed"); });
使用myUtil.goCalendar(); 我用所有活动构建日历。 这包括为具有该属性的所有事件添加event.className(’afc-completed’)。 构建日历后,我得到所有这些事件,并在’fc-event-time’中添加另一个类。 这不是我想到的第一个请求,但可以成为使用CSS语句添加更多html代码的基础:
.afc-event-completed { color: red; text-decoration: line-through; }
..或添加图标。 也许不是最好的程序..但是一种解决要求的方法。
征集专家:
任何其他/更好/更短/更快的方式。
冈特
有了这个,您可以在Fullcalendar中为事件的标题添加文本或HTML
eventRender: function(event, element) { var icon = 'The icon you want, HTML is possile'; $(element).find('.fc-time').append(icon); }
嗨,我在修改fullcalendar.min.js时解决了我的问题,并删除了标题上的htmlEscape。 只需找到单词HtmlEscape并将其删除即可。 在活动日历中,您现在可以添加图标等
这对我有用:
在完整日历1.5.4
eventRender: function(event, element) { //this will add and you can append everthing there element.find("div").find("span").before("").addClass("iconcon"); }
并放入CSS
.iconcon:before{ //if icon not there then change :before with :after font-family: "FontAwesome"; content: "\f1fd\00a0"; // \00a0 is blank space color: #fff; }