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

Question

我正在使用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'
},

但是，我希望能够在"开始"one_answers"结束"参数中输入工作日，而不是日期，并使此事件每周在同一天发生。这可能吗？

Answer 1

Fullcalendar不直接支持这一点，但这并不意味着这是不可能的，你只需要有创造力。

从本质上讲，我们要在可见的日子里循环，测试每一天是否符合我们的规则。我们可以使用事件源来实现这一点，因为它们可以定义为函数。

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

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