如何以编程方式更新fullcalendar中事件的呈现

时间:2014-04-04 05:11:11

标签: javascript jquery events fullcalendar

我正在开发一个已经使用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 renderevent click回调中..函数updateEvent(event)设置背景属性后被称为。但在我的情况下..设置属性后,此事件被调用。所以我的问题更多的是:如何从外部实际调用这个upateEvent方法?它似乎是一个私有变量。

更新:我让它工作,但只是通过存储所选div的css属性,然后使用jquery找到相同的div并在之后手动突出显示它。对这种hacky方式不太满意..希望有人会来并告诉我如何通过fullcalendar完成它。

1 个答案:

答案 0 :(得分:1)

事实证明我只需要更新calendarEvent的属性,即

calEvent.isActive = true; 
calEvent.status = 0; // ie in progress

然后致电update event

$('#calendar').fullCalendar('updateEvent',calEvent);

为我处理所有渲染