Question

刚开始使用全日历，它看起来很棒。

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

似乎eventRender仅在事件最初添加到视图中时发生...

是否有一种方法可以在事件发生时动态更改其样式（“突出显示” /更改背景颜色）？也就是说，当“ nowIndicator”结束事件时？

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

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

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

Answer 1

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

以下示例步骤可能会有所帮助：

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

                { 
                id: data.Id,
                start: data.FromDate,
                end: data.ToDate,
                title: data.Name,
                description: data.Description,                       

                **backgroundColor: data.ColorCode,**

                allDay: falsedata.AllDay                        
            }

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

传递此对象并在“日历”事件下设置：

$('#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());           
},

}）；

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

1 个答案: