Fullcalendar 中的更新事件答案

【问题标题】：updateEvents in FullcalendarFullcalendar 中的更新事件
【发布时间】：2014-12-03 14:04:11
【问题描述】：

我正在使用 Fullcalendar 在日历中打印事件。我遇到的问题是我不知道 Fullcalendar 是否允许您在打印事件数据后对其进行编辑。我一直在阅读文档和 updateEvent(method) 部分，但我已经复制了那里所说的内容，但它根本不起作用。我不知道我是否遗漏了什么。如果有人使用过 Fullcalendar，我会感谢一些帮助。

  function drawControl(controls) {
            console.log(controls[0])

            $('#calendar').fullCalendar({
                editable: true,
                aspectRatio: 1,
                contentHeight: 500,
                scrollTime: '24:00:00',
                minTime: '01:00:00',
                maxTime: '24:00:00',
                defaultView: 'agendaWeek',
                header:{left:"prev,next,today",
                center:"title",
                right:"month, agendaWeek, agendaDay"},



                events: allControls(controls),

                eventRender: function(event, element) {

                    var bloodLevel=event.title

                    if(bloodLevel >= 180) {
                        element.css('background-color', 'red');
                    }
                    else if(bloodLevel < 70) {
                        element.css('background-color', 'yellow');
                    }
                },
                eventClick: function(event, element) {


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

    }
                //
        // put your options and callbacks here
    })

    }

});

【问题讨论】：

Hola David，您能否提供一段代码或您遇到的错误？什么失败了？控制台有错误吗？
没有错误。 eventClick 只是不起作用。我希望事件允许我编辑它们并更改它们的数据。
在该代码中，单击时您不会更改事件。您应该在调用 updateEvent() 之前更改其任何属性。试试 eventClick: function(event, element) { event.title = "Clicked"; $('#calendar').fullCalendar('updateEvent', event); }
但问题是每个事件都是通过表单创建的，所以当我点击它们时我不知道该怎么做我有机会更改它们的标题或它们的开始.我不希望我的活动标题被“点击”
我知道您不想“点击”您的事件，这只是为了测试目的。如果你有一个表单来创建它们，当你点击事件时，你应该加载一个表单来更新它们，使用从 event.id 中的回调接收到的 id。然后，在您的表单中，您可以设置一个调用 updateEvent() 的保存按钮。

标签： fullcalendar

【解决方案1】：

// draw your calendar
$('#calendar').fullCalendar(...);

// click something to make a change
$('#myButton').click(function(){
    var myEvents = $('#calendar').fullCalendar('clientEvents');
    for(var i in myEvents){
        if(myEvents[i].property == myConcern) {
            myEvents[i].something = newValue;
        }
    }
});

【讨论】：

好的，但我不明白什么是财产和什么意思。能不能给我一点解释...谢谢
'property' 和 'something' 可以是事件对象的任何属性。在这里，我们基本上只是遍历事件对象数组并使用 if 语句来检查属性值并确定是否需要编辑/更改事件的数据。问题：在您的原始帖子中，您想“编辑事件数据”。您是在谈论编辑 eventObject 的数据还是更新屏幕上显示的 UI 视图？
我想要的是更新事件的数据。我的意思是，如果我点击一个事件，它会将我重定向到 Rails 中的表单，我可以在其中更改对象的属性（：level，：day，：period）。

【解决方案2】：

有两种选择：

使用loading
使用eventAfterAllRender

使用eventAfterAllRender 的Bt，在所有事件完成从源的fullCalendar 中呈现后触发。

eventAfterAllRender: function( view ) {
    var allevents = $('#calendar').fullCalendar('clientEvents');
    var count = allevents.length;
    - - -
    - - -
}

现在，使用allevents 数组，做一些必要的事情。使用循环获取事件的属性。

【讨论】：

【解决方案3】：

在调用 .fullCalendar('updateEvent', event) 之前，尝试将 event.backgroundColor 属性与 element.css() 一起设置。

例子：

if(bloodLevel >= 180) {
    element.css('background-color', 'red');
    event.backgroundColor = 'red';
}
else if(bloodLevel < 70) {
    element.css('background-color', 'yellow');
    event.backgroundColor = 'yellow';
}

【讨论】：