我正在开发一个已经使用fullcalendar渲染日历的应用程序,每当页面刷新时,使用event render回调始终使用正确的颜色渲染时隙。它还可以使用event click回调正确更改时间段的颜色。
这一切都很好,但是我正在尝试以编程方式操作时间段的渲染,这是基于用户在日历完全加载后的其他一些东西。在代码中这是我正在尝试做的事情
var eventClick = function(calEvent, jsEvent, view) {
// first we change the color of the event to indicate that it was clicked
calEvent.backgroundColor = orangeColor;
calEvent.textColor= darkGreyColor;
calEvent.active=true;
$(this).css('background', orangeColor).css('color', darkGreyColor);
// i cache both the calEvent and the element to manipulate them later on
cachedActiveEvents.push(calEvent);
// here i'm storing this div: <div class="fc-event fc-event-vert ..>
// <div class="fc-event-inner">
// <div class="fc-event-time">12:30 - 1:20</div>
// <div class="fc-event-title">event title</div>
// ..
cachedActiveEventViews.push($($(jsEvent.target).parent().parent()));
..
单击后,程序将显示用户填写的模式表单。完成并解除对话框后,单击的事件需要更改其颜色以反映状态的变化,这就是我调用此方法的位置:
function hideLessonPlan() {
..
$.map(cachedActiveEvents, function(calEvent, eventIndex) {
var element = cachedActiveEventViews[eventIndex];
calEvent.backgroundColor = blackColor;
calEvent.textColor = "white"
element.css('background', blackColor).css('color','white');
});
}
这根本行不通。使用Chrome开发工具断点我确保函数hideLessonPlan
实际上与正确的变量对话。
经过进一步调查后,我意识到在event render
和event click
回调中..函数updateEvent(event)在设置背景属性后被称为。但在我的情况下..设置属性后,此事件不被调用。所以我的问题更多的是:如何从外部实际调用这个upateEvent方法?它似乎是一个私有变量。
更新:我让它工作,但只是通过存储所选div的css属性,然后使用jquery找到相同的div并在之后手动突出显示它。对这种hacky方式不太满意..希望有人会来并告诉我如何通过fullcalendar完成它。
答案 0 :(得分:1)
事实证明我只需要更新calendarEvent的属性,即
calEvent.isActive = true;
calEvent.status = 0; // ie in progress
然后致电update event:
$('#calendar').fullCalendar('updateEvent',calEvent);
为我处理所有渲染