如何突出显示全日历timegridview当前事件？

Question

刚开始使用fullcalendar，它看起来很棒。

我正在测试TimeGridView，并启用“ nowIndicator”。

看起来eventRender仅在事件最初添加到视图时才发生...

当前发生事件时，是否可以动态更改事件的样式（“突出显示” /更改背景颜色）？ 也就是说，“ nowIndicator”何时结束事件？

例如，某个事件发生在“今天”从09:00:00到10:00:00 ...，而当前时间在该范围内的任何时间，则该特定事件的背景颜色应发生变化。

当视图在延长的时间内保持显示状态时（例如，随着当前时间的改变，事件的背景应该改变），这尤其有用。

我感谢任何提示/技巧/指针！

Answer 1

您可以在填充事件时操纵事件对象。 根据所需时间，设置其他属性，例如“ SetBackgroundColor：＃000000”。 将此对象传递给日历。 在“ eventRender”方法下，操作元素并设置该颜色。

以下是可能有帮助的示例步骤：

1. 编写服务器端代码，操纵事件对象，并根据业务逻辑将颜色设置为字段。

     { id: data.Id, start: data.FromDate, end: data.ToDate, title: data.Name, description: data.Description, **backgroundColor: data.ColorCode,** allDay: falsedata.AllDay } 

2. HTML方面：调用Ajax方法并获取事件对象列表。

3. 传递此对象并在Calendar事件下设置：

    $('#Calendar').fullCalendar({ //..... set other options events: function (start, end, timezone, callback) { callback(eventsList); }, eventRender: function (event, element) { element.find("div.fc-content").html("<div class='ddl'>" + "<span class='event-icon' style = 'background: " + **event.backgroundColor** + ";'></div></div>");//Manipulate the rendered HTML of Calendar cell }, viewRender: function (view) { var date = new Date(view.calendar.getDate()); }, 

   }）;