在事件的第一行添加图标（fullCalendar）

Question

为了在“fullCalendar”矩阵中显示事件的特定属性，我想添加图标以显示它们。例如，“已完成”可以用一个(i)按钮表示，如果事件包含URL链接，则使用一个URL符号。

我不想将任何HTML字符串写入元素中的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>

有人能帮忙吗？ Günter

- neandr

Answer 1

这个话题有点老了，但我在这里找不到如何使用<img>标签实现它的方法，所以我在这里留下另一种在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("<img src='" + event.imageurl +"' width='12' height='12'>");
    }
},

如果您想在所有项目上使用相同的图像，您只需将以下代码放入您的eventRender中：

eventElement.find("div.fc-content").prepend("<img src='pathtoimage.png' width='12' height='12'>");

- user2219484

---

不错的方法。Full Calendar v2.3.2似乎不再使用fc-event-inner类了。将其更改为fc-content类。 - Mark

抱歉晚来一步，但我想知道在哪里放置 eventRender 代码。 - Lastmboy

Answer 2

您可以像这样利用“eventRender”事件：

您可以通过以下方式利用“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"));
    }
});

同样地，您可以将新元素附加到事件的 DIV 容器中的任何其他元素。

- Dimitri

---

据我所知，“eventRender”是在鼠标悬停在日历中显示的事件上进行处理的。 我的请求是“添加”事件的显示方式，例如在时间旁边添加一个图标。因此，“eventRender”是在日历中显示后进行处理的，我需要在显示之前进行更改！ - neandr

当事件被放置在日历上时，即在日历加载、事件获取等情况下，不会处理任何eventRender事件。 - Dimitri

谢谢，是的我需要纠正这个。这会让事情变得更容易。Günter - neandr

Answer 3

使用此功能，您可以在Fullcalendar中的事件标题中添加文本或HTML。

eventRender: function(event, element) {

            var icon  = 'The icon you want, HTML is possile';
                $(element).find('.fc-time').append(icon);
            }

- Julha

Answer 4

我通过修改fullcalendar.min.js并在标题上删除htmlEscape来解决了这个问题。只需找到单词HtmlEscape并将其删除即可。然后在事件日历中，您可以像这样添加图标：

<i class="fa fa-plus"></i>

- MR dns

Answer 5

这对我有效：

在完整日历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");
}

并放入CSS中

.iconcon:before{  //if icon not there then change :before with :after
  font-family: "FontAwesome";  
  content: "\f1fd\00a0";   // \00a0 is blank space
  color: #fff;
}

- Anthony Kal

Answer 6

一个可能的解决方案是：

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

..或者添加图标。也许不是最好的方法..但这是解决需求的一种方式。

呼叫专家：
是否有其他/更好/更短/更快的方法。
Günter

- neandr

---

哎呀，这是一个“无与伦比”的解决方案... ...任何操作（如调整窗口大小，[<]或[>]等）都会丢失所有添加的“属性”。这是由于在fullCalendar函数之外进行渲染造成的。另一个解决方案...就是将所描述的函数移动到成为fullCalendar的一部分。有什么建议吗？ - neandr

好的，似乎已经解决了：在调用$('#calendar').fullCalendar({ ..})时包括 'viewDisplay' 和 'windowResize'我对这个功能齐全的“日历”非常着迷...做得很好！ - neandr

Answer 7

eventRender: function (calEvent, element) {

    element.find("div.fc-content").prepend("<img src='/imagens/IconExperience/16x16/sms.png' width='16' height='16'>"); 
}

-- 监听器事件点击

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

- Fabio Zatta