FullCalendar-根据事件条件每天显示图标 [英] FullCalendar - Display icon on each day based on event criteria

问题描述

我正在使用FullCalendar.我想在与某些事件条件匹配的每一天的单元格中显示一个图标.

I am using FullCalendar. I would like to display an icon in each day cell that matches certain event criteria.

更具体地说，我想显示警告&如果我的事件供稿中的注释"字段不为空，则会提示提示.

More specifically, I would like to display a warning & tooltip if the 'notes' field in my event feed is not empty.

无论发生什么事件，我每天都可以显示一个图标，但我想进一步向前迈进.

I am able to display an icon on each day, regardless of any events, but I want to take it one step further.

这是我每天使用dayRender显示的方式:

Here is how I am displaying on each day using dayRender:

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

如果使用eventRender，我可以使工具提示和图标正确显示，但是该图标作为事件的一部分显示.我希望图标成为日间单元格的一部分.

I can get the tooltip and icon to show up correctly if I use eventRender, but then the icon shows up as part of the event....which I don't want. I want the icon part of the day cell.

这是我的eventRender:

Here is my 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>"); 
        }
    } 

这是我的活动供稿:

$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吗?

Is it possible to make the dayRender based on specific event criteria? Do I use a combination of dayRender and eventRender?

推荐答案

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

Day cells in the month view are rendered like this:

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

因此，您可以很容易地找到特定的日间单元格:

Therefore you can find a particular day cell quite easily:

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

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

Within the eventRender callback, you can use the event's start time to make this dynamically relate to the correct day for the event:

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

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

See http://jsfiddle.net/sbxpv25p/68/ for a working example.

您当然可以添加任何您喜欢的内容代替"Hi".

You may append anything you like in place of "Hi", of course.

请注意，根据工作示例，如果给定的一天有多个事件，那么它仍然具有一个缺点，即它可能会多次附加相同的内容.

Note that, as per the working example, this still has the drawback that it may append the same thing more than once, if there are multiple events on a given day.

这篇关于FullCalendar-根据事件条件每天显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！