由 Bootstrap 模式创建时不呈现后台事件

Question

我在通过 Bootstrap 模式向 FullCalendar 添加背景事件时遇到了一个小问题。

我能够使用这样的简单事件数据（工作 jsfiddle）呈现背景事件：

var eventData = {
    start: '2016-10-01',
    end: '2016-10-04',
    rendering: 'background',
    color: '#ff9f89'
};
$('#calendar').fullCalendar('renderEvent', eventData, true);`

我也可以使用标题提示和基于标题的附加规则（工作小提琴）来做到这一点：

select: function(start, end) {
    var title = prompt('Event Title:');
    var eventData;
    if (title) {
        if (title === "holiday"){
            eventData = {
                start: start,
                end: end,
                rendering: 'background',
                color: '#ff9f89'
            };
        }
        else{
            eventData = {
                title: title,
                start: start,
                end: end
            };
        }
    }

    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
    $('#calendar').fullCalendar('unselect');
}

下面的代码也应该工作（fiddle），但它没有。通过模态添加常规事件不是问题，但只要它是背景事件，就不会发生任何事情。rendering: 'background',从等式中删除并且它有效，因此问题出于某种原因出在该行中。

但是为什么后台事件的行为会与通过模态的正常事件不同，只要它们在初始化或日历之外工作得很好并且使用选择？

select: function(start, end) {
    $('#calendarModal').modal('show');
    $('#calendarModal #startTime').val(start);
    $('#calendarModal #endTime').val(end);
}

// ...

$('#calendarModal').on('click', '#save', function(){
    var title = $('#calendarModal #title').val();
    var start = new Date($('#calendarModal #startTime').val());
    var end = new Date($('#calendarModal #endTime').val());
    var eventData;
    if (title){
        if (title === "holiday"){
            eventData = {
                start: start,
                end: end,
                rendering: 'background',
                color: '#ff9f89'
            };
        }
        else{
            eventData = {
                title: title,
                start: start,
                end: end
            };
        }
    }
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
    $('#calendar').fullCalendar('unselect');
    $('#calendarModal').modal('hide');
});

有想法该怎么解决这个吗？

Answer 1

您遇到的问题与日期和allDay参数有关。该Background event文件规定如下：

定时的后台事件将仅在议程视图中的时间段上呈现。全天的后台事件将仅在月视图或议程视图的全天插槽中呈现。

因此，您应该做的是检查正在使用哪个视图并allDay正确应用参数。将保存功能更新为：

$('#calendarModal').on('click', '#save', function(){
    var title = $('#calendarModal #title').val();
    var start = moment($('#calendarModal #startTime').val());
    var end = moment($('#calendarModal #endTime').val());
    var eventData;

    // Get the current used view and set a default value to allDay
    var view = $('#calendar').fullCalendar( 'getView' ),
        allDay = false;

    // If the view is month, set allDay to true
    if (view.name === 'month') {
        allDay = true;
    }

    if (title){
        // When setting the event data, be sure to send the `allDay` param
        if (title === "holiday"){
            eventData = {
                start: start,
                end: end,
                rendering: 'background',
                color: '#ff9f89',
                allDay: allDay
            };
        }
        else{
            eventData = {
                title: title,
                start: start,
                end: end,
                allDay: allDay
            };
        }
    }
    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
    $('#calendar').fullCalendar('unselect');
    $('#calendarModal').modal('hide');
});

这是更新的 jsfiddle。

作为旁注，第二个和第三个小提琴之间的区别不仅仅是引导模式。在第二个小提琴中，您使用start和end参数，因为它们被selectFullCalendar发送到方法。

在第三把小提琴上，你从输入中得到一个“日期”。我在这里猜测，但我认为这就是它在您使用提示时起作用而在使用模态时不起作用的原因。

但是，如文档所述，正确的方法是发送allDay参数。