在FullCalendar上添加重复事件到工作日

时间:2015-02-12 22:14:52

标签: jquery asp.net-mvc fullcalendar

我正在使用MVC和FullCalendar(fullcalendar.io/)创建时间表,并且通常会添加"事件"到日历将如下所示:

{
     id: 999,
     title: 'This is the class type',
     start: '2015-02-09T16:00:00',
     end: '2015-02-09T17:00:00',
     room: 'This is the room number',
     module: 'This is the module name'
},

但是我希望能够在"开始"进入工作日。和"结束"参数而不是日期,并且该事件在同一天的每周发生。这有可能吗?

1 个答案:

答案 0 :(得分:2)

Fullcalendar并不直接支持此功能,但这并不意味着它不可能,您只需要具有创造性。

基本上,我们将在可见的日子里循环,测试每个日子以符合我们的规则。我们可以使用they can be defined as functions之后的事件源来执行此操作。

JSFiddle

// Returns all the days between two dates that pass the test function
var matchingDaysBetween = function (start, end, test) {
    var days = [];
    for (var day = moment(start); day.isBefore(end); day.add(1, 'd')) {
        if (test(day)) {
            days.push(moment(day)); // push a copy of day
        }
    }
    return days;
}

$('#fullcalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    // Fullcalendar will load sources defined here every view change.
    eventSources: [{
        // Every sunday as a background event
        events: function (start, end, timezone, callback) { 
            // Get the days
            var days = matchingDaysBetween(start, end, function (day) {
                return day.format('dddd') === 'Sunday'; //test function
            });

            // Map days to events
            callback(days.map(function (day) { 
                return {
                    start: moment(day).startOf('day'),
                    end: moment(day).endOf('day'),
                    title: "sunday",
                    rendering: 'background',
                    id: "sundays"
                };
            }));
        }
    }, {
        // Every tuesday noon to 2pm
        events: function (start, end, timezone, callback) {
            var days = matchingDaysBetween(start, end, function (day) {
                return day.format('dddd') === 'Tuesday'; //test function
            });
            callback(days.map(function (day) { // map days to events
                return {
                    start: moment(day).hour(12),
                    end: moment(day).hour(14),
                    title: "lunch",
                    id: "tueslunch"
                };
            }));
        }
    }]
});

这应该很容易定制,以适应大多数简单的用例。