事件源 FullCalendar答案

【问题标题】：Event source FullCalendar事件源 FullCalendar
【发布时间】：2012-03-10 19:29:48
【问题描述】：

我想创建一个函数来生成我的事件。

在 fullCalendar 的文档中我找到了一些东西：

{
    events: function(start, end, callback) {
        // ...
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

{
    events: function() {
        // ...
        for (var k=0; k<myarray.length; k++)
        {
            title: myarray[0][0],
            start: myarray[0][1]
        }
    },
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
}

开始、结束和回调是什么意思？

我想在加载日历时启动该功能...

我想做类似第二个例子的事情...... 我该怎么办？

非常感谢

【问题讨论】：

阅读文档？
events: function () { //.. for (var i=0; i

标签： jquery function jquery-plugins fullcalendar

【解决方案1】：

正如documentation 中所述，指定为函数的events 属性将在需要新事件数据时由fullCalendar 调用。它将传入 2 个日期，这些日期代表日历上当前查看的时间片的开始日期和结束日期。给出的第三个参数是一个回调，当您的自定义函数在给定的时间范围内生成数据时应该调用它，并将生成的事件数据传递给它。

当日历首次加载时，它需要当前显示的任何视图的数据。例如，如果它在当前日期的月视图中，start 将是当月的第一天，end 将是当月的最后一天。您的函数应该在该时间范围内生成一个事件数据数组（格式如 documentation 中指定）并将其传递给作为参数 3 给出的回调函数。

如果日历当前在月视图中，并显示 2010 年 10 月，并且用户单击右键告诉日历前进到下个月，则将调用您的函数，并使用 2010 年 11 月 1 日的开始参数和结束2010 年 11 月 30 日的参数。您将生成该时间段的事件数据并将其传递给回调参数。

根据您提供的示例（存在极端的 JS 语法问题），我想说您不希望将 events 用作函数。相反，您的代码应该在调用.fullCalendar() 之前生成properly formatted event data array，并将该数组作为events 属性传递。示例：

/* Assuming you have an array, myArray, which holds data about
 * your events, but is not in the format axpected by fullCalendar
 */

var formattedEventData = [],
    k;

for (var k = 0; k < myArray.length; k += 1) {
    formattedEventData.push({
        title: myarray[k][0],
        start: myarray[k][1]
    });
}

$('#targetElement').fullCalendar({
    events: formattedEventData,
    color: 'yellow',
    textColor: 'black'
});

【讨论】：

感谢您的帮助！这是一个很棒的解决方案！

【解决方案2】：

我做了与 JAAulde 说的相同的事情，但是在 asp.net 中使用了一个模型，并且效果很好。如果有人需要，这里是代码：

$(document).ready(function () {
    var formattedEventData = [];

    @foreach (var item in Model){
            <text>
            formattedEventData.push({
            title: '@(item.name)',
            description: '@(item.description)',
            start:'@(item.startTimeHTML)',
            end: '@(item.endTimeHTML)',
            description: '@(item.description)'
            });
            </text>
        }

    var calendar = $('#calendar').fullCalendar({            
        events: formattedEventData
        });
});

【讨论】：