当由Bootstrap模态创建时，背景事件不会被渲染

Question

我有一个小问题，通过Bootstrap模式添加背景事件到FullCalendar

我可以用一个简单的事件数据来呈现背景事件，就像这样(working 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');
}

下面的代码应该也可以工作，但它没有。通过模态添加常规事件不是问题，但当它是背景事件时，什么也不会发生。把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参数，因为它们是由FullCalendar发送给select方法的。

第三步，您将从输入中获得一个"日期"。这是我的猜测，但我认为这就是为什么当你使用提示符时它有效，而当你使用模态时它不起作用。

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