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

Question

我正在使用 MVC 和 FullCalendar (fullcalendar.io/) 创建时间表，通常向日历添加 "event" 如下所示：

{
     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'
},

但是我希望能够在 "start" 和 "end" 参数中输入工作日而不是日期，并且让此事件每周在同一天发生。这可能吗？

Answer 1

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

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

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

Add repeating events to weekdays on FullCalendar

asp.net-mvc

jquery

fullcalendar