事件源FullCalendar

Question

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

在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!
}

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

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

我想做第二个例子...... 我该怎么办？

非常感谢

Answer 1

正如documentation中所解释的那样，只要需要新的事件数据，fullCalendar就会调用指定为函数的events属性。它将传递2个日期，这些日期表示日历上当前查看的时间片段的开始和结束日期。给出的第三个参数是自定义函数在为给定时间帧生成数据时应调用的回调函数，并将生成的事件数据传递给它。

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

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

根据您给出的示例（具有极端的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'
});

Answer 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
        });
});