事件源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!
}

“start”，“end”和“callback”是指什么？

我想在加载日历时启动函数...

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

非常感谢

- Bellu

---

阅读文档？ - mas-designs

事件: 函数 () { //.. 对于 (var i=0; i<myarray.length; i++) { 标题: myarray[0][0], 开始: [0][1]} }, 我想做类似这样的事情，我该怎么办？ - Bellu

Answer 1

正如文档所解释的那样，events属性作为一个函数被指定时，fullCalendar需要新的事件数据时就会调用它。它将传入两个日期，这些日期代表日历上当前视图时间段的开始和结束日期。给定的第三个参数是一个回调函数，当您的自定义函数为给定的时间段生成数据并将生成的事件数据传递给它时，应该调用该回调函数。

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

如果日历当前处于月视图，并显示2010年10月份，并且用户单击右侧按钮告诉日历前进到下一个月，则将使用1 Nov 2010作为开始参数，30 Nov 2010作为结束参数调用您的函数。您将为该时间段生成事件数据，并将其传递到回调参数中。

根据您提供的示例（它有极端的JS语法问题），我想说您不希望将events作为一个函数使用。相反，在调用.fullCalendar()之前，您的代码应该生成一个正确格式化的事件数据数组，并将该数组作为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'
});

- JAAulde

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

- Guillaume Boudreau