在事件的第一行添加图标(fullCalendar)

Question

对于要在'fullCalendar'矩阵中显示的事件的特定属性,我想添加图标来显示它们,添加'完成'(i)按钮,或者在事件包含URL链接的情况下添加URL符号.

我不想将任何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>

这里有什么帮助？冈特

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'>");

Answer 2

您可以像这样搭载"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容器中的任何其他元素

Answer 3

一种可能的解决方案可能是：

\n\n

  myUtil.goCalendar();       // build calendar with all events \n\n  // --- post process to add functionality to \'specific\' events displayed \n  //     in the calendar matrix, eg. "completed"\n  $("div.afc-completed").each(function(){\n     $(this).find(\'span.fc-event-time\').addClass("afc-event-completed");\n  });\n

\n\n

使用 myUtil.goCalendar(); 我建立了包含所有事件的日历。这包括为具有该属性的所有事件添加 event.className (\'afc-completed\')。\n构建日历后，我获取所有这些事件并将另一个类添加到 \'fc-event-time\'。这不是我对第一个请求的想法，但可能是使用如下 CSS 语句添加更多 html 代码的基础：

\n\n

.afc-event-completed {\n    color: red;\n    text-decoration: line-through;\n}\n

\n\n

..或添加图标。也许不是最好的程序..而是解决需求的一种方法。

\n\n

寻求专家：
\n任何其他/更好/更短/更快的方法。
\nG\xc3\xbcnter

\n