如何以编程方式在全日历中更新事件的呈现 [英] how to programmatically update the rendering of an event in fullcalendar

问题描述

我正在开发一个已经使用fullcalendar渲染日历的应用程序，每当页面刷新时，总是使用

I'm working on an app that already renders a calender using fullcalendar, whenever the page refreshes the time slots are always rendered with the correct colors using the event render callback. It also correctly changes the color of the time slot when the event is clicked upon, using the event click callback.

这一切都很好，但是我试图根据用户在日历完全加载后 所做的一些其他事情，以编程方式操纵时隙的渲染.在代码中，这就是我想要做的

This is all nice, however I'm trying to programmatically manipulate the renderings of the time slots based on some other stuff the user does after the calendar has fully loaded. In code this is what i'm trying to do

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()));

    ..

单击一次，程序将显示用户填写的模式表格.在完成并关闭对话框后，clicked事件需要更改其颜色以反映状态的变化，这就是我调用此方法的地方:

once clicked, the program displays a modal form that the user fills. Upon completion and dismissal of the dialog, the clicked event needs to change its color to reflect a change of status, that's where i call this method:

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实际上与正确的变量通信.

This simply don't work. Using Chrome dev tool breakpoints i ensured that the function hideLessonPlan actually talks to the right variables.

在进一步调查中，我意识到在event render和event click回调中..函数

Upon further investigation i realized that in both event render and event click callbacks.. the function updateEvent(event) is called after the background properties have been set.. however in my case.. this event is not called after setting the properties. So my question is more of: how can I actually call this upateEvent method from the outside? It seems like a private variable.

更新:我通过保存所选div的css属性，然后使用jquery查找相同的div并手动将其后缀突出显示来使其工作.对这种骇人听闻的方式不太满意..希望有人能跟我来演示如何通过全日历来做到这一点.

update: i made it work but simply by storing the css properties of the selected div and then using jquery to find the same div and highlighting it manually afterwords. not too happy about this hacky way.. hoping someone would come along and show me how to do it through fullcalendar.

推荐答案

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

it turns out that i simply had to update the property of the calendarEvent ie

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

然后调用更新事件:

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

为我完成了所有渲染工作

that took care of all the rendering for me

这篇关于如何以编程方式在全日历中更新事件的呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！