Question

我正在使用FullCalendar。我想在每天的单元格中显示符合特定事件标准的图标。

更具体地说，我想显示一个警告＆amp;工具提示，如果＆＃39;注意＆＃39;我的事件Feed中的字段不为空。

我可以在每一天显示一个图标，无论发生什么事，但我想更进一步。

以下是我每天使用dayRender显示的方式：

dayRender: function ( date, cell) {
cell.prepend('<i class="fa fa-exclamation-circle" aria-hidden="true"></i>');
}

如果我使用eventRender，我可以正确显示工具提示和图标，但随后图标显示为事件的一部分....我不想要。我想要日间单元格的图标部分。

这是我的eventRender：

eventRender: function(event, element) { 
                if (event.notes) { 
                    $(element).tooltip({title: event.notes});
        element.find(".fc-title").prepend("&nbsp;&nbsp;" + "<i class='fa fa-exclamation-circle' aria-hidden='true'></i>"); 
        }
    }

这是我的活动Feed：

$event_array[] = array(
        'id' => $calrow['id'],
        'title' => $calrow['available'],
        'start' => $calrow['start_date'],
        'end' => $calrow['end_date'],
        'notes' => $notes,
        'price' => '$'.$calrow['nightly_price'],
        'confirmationcode' => $calrow['confirmation_code'],
        'status' => $calrow['status'],
        'available' => $available

）;

是否可以根据特定的事件标准制作dayRender？我是否使用dayRender和eventRender的组合？

Answer 1

月视图中的日期单元格呈现如下：

<td class="fc-day-top fc-thu fc-past" data-date="2017-11-02">

因此，您可以非常轻松地找到特定的日间单元格：

$('.fc-day-top[data-date="2017-11-02"]')

在eventRender回调中，您可以使用事件的开始时间使其与事件的正确日期动态相关：

eventRender: function(event, element)
{
  $('.fc-day-top[data-date="' + event.start.format("YYYY-MM-DD") + '"]').append("Hi");
},

有关工作示例，请参阅http://jsfiddle.net/sbxpv25p/68/。

当然，你可以附加任何你喜欢的东西代替＆＃34;嗨＆＃34;

请注意，根据工作示例，如果某一天有多个事件，这仍有一个缺点，就是它可能会多次附加同一个东西。

FullCalendar - 根据事件条件每天显示图标

1 个答案: