jQuery 在事件的第一行添加图标 (fullCalendar)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3750521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Icon(s) in first line of an event (fullCalendar)
提问by neandr
For specific attributes of an event to be displayed in the 'fullCalendar' matrix I would like to add icons to show them, for 'completed' an (i) button, or an URL symbol in case the event contains an URL link.
对于要在“fullCalendar”矩阵中显示的事件的特定属性，我想添加图标来显示它们，对于“已完成”，一个 (i) 按钮，或一个 URL 符号，以防事件包含 URL 链接。
I don't want to write any html string to one of the elements (fc-event-time/-title) in the <a> element, but define an additional element like this:
我不想将任何 html 字符串写入 <a> 元素中的元素之一 (fc-event-time/-title)，而是定义一个这样的附加元素：
<a>
<span class="fc-event-time">15:15 - 16:15<br></span>
**<span class="fc-event-icons"> ..some definitions for icons here ..</span>**
<span class="fc-event-title">Fri Dille</span>
</a>
Any help here? Günter
这里有什么帮助吗？君特
回答by user2219484
Well this topic is old, but I couldn't find here how to do it with <img>tags so I leave here another way to put images in fullcalendar events:
好吧，这个话题很旧，但我在这里找不到如何使用<img>标签来做这件事，所以我离开了另一种将图像放入全日历事件的方法：
Add in your eventObjecta path to the image. If you use javascript it would be something like:
添加eventObject到图像的路径。如果您使用 javascript，它将类似于：
events: [
{
title : 'event1',
start : '2010-01-01',
imageurl:'img/edit.png'
},
{
title : 'event1',
start : '2010-01-01'
}]
Then on eventRenderjust put the image:
然后eventRender就放上图片：
eventRender: function(event, eventElement) {
if (event.imageurl) {
eventElement.find("div.fc-content").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
}
},
If you want to use the same image on all items, you just need to put this in your eventRender:
如果你想在所有项目上使用相同的图像，你只需要把它放在你的eventRender：
eventElement.find("div.fc-content").prepend("<img src='pathtoimage.png' width='12' height='12'>");
回答by Dimitri
You could piggyback the "eventRender" event like so:
您可以像这样搭载“eventRender”事件：
$("#YourCalendar").fullCalendar({
eventRender: function(event, element) {
element.find(".fc-event-time").after($("<span class=\"fc-event-icons\"></span>").html("Whatever you want the content of the span to be"));
}
});
similarly you could append the new element to any other element in the event's DIV container
同样，您可以将新元素附加到事件的 DIV 容器中的任何其他元素
回答by Julha
With this you can add text or HTML to the title of your events in Fullcalendar
有了这个，您可以在 Fullcalendar 中将文本或 HTML 添加到事件的标题中
eventRender: function(event, element) {
var icon = 'The icon you want, HTML is possile';
$(element).find('.fc-time').append(icon);
}
回答by MR dns
I solved this problem by modifying fullcalendar.min.js and removing the htmlEscapeon the title. Just find the word HtmlEscapeand remove it. Then in the event calendar you can append icons like this:
我通过修改 fullcalendar.min.js 并删除htmlEscape标题上的解决了这个问题。只需找到该词HtmlEscape并将其删除即可。然后在事件日历中，您可以附加这样的图标：
<i class="fa fa-plus"></i>
回答by Anthony Kal
this works for me :
这对我有用：
in full calendar 1.5.4
在完整日历 1.5.4
eventRender: function(event, element) {
//this will add <span> and you can append everthing there
element.find("div").find("span").before("<span/>").addClass("iconcon");
}
and put in CSS
并放入 CSS
.iconcon:before{ //if icon not there then change :before with :after
font-family: "FontAwesome";
content: "\f1fdeventRender: function (calEvent, element) {
element.find("div.fc-content").prepend("<img src='/imagens/IconExperience/16x16/sms.png' width='16' height='16'>");
}
a0"; // eventClick: function (calEvent, jsEvent, view) {
if (jsEvent.target.href != undefined) {
//click on a icon in event
"http://localhost:64686/imagens/IconExperience/16x16/whatsapp-icon.png"
etc...
}
alert(jsEvent.target.href);
}
a0 is blank space
color: #fff;
}
回答by Fabio Zatta
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");
});
-- listener event click
-- 监听事件点击
.afc-event-completed {
color: red;
text-decoration: line-through;
}
回答by neandr
One possible solution could be:
一种可能的解决方案是：
##代码##With myUtil.goCalendar(); I building the calendar with all events. That includes to add an event.className ('afc-completed') for all events with that attribute. After building the calendar I get all those events and add another class to the 'fc-event-time'. That's not what I thought with my first request, but could be a base to add more html code using a CSS statement like this:
使用 myUtil.goCalendar(); 我用所有事件构建日历。这包括为具有该属性的所有事件添加 event.className ('afc-completed')。构建日历后，我获取了所有这些事件并将另一个类添加到“fc-event-time”。这不是我对第一个请求的想法，但可以作为使用 CSS 语句添加更多 html 代码的基础，如下所示：
##代码##.. or to add icons. Maybe not the best procedure .. but a way to solve the requirement.
.. 或添加图标。也许不是最好的程序……而是解决需求的一种方法。
Call for experts:
Any other/ better/ shorter/ faster way.
Günter
呼吁专家：
任何其他/更好/更短/更快的方法。
君特
