Twitter bootstrap 由引导模式创建时不会呈现背景事件

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

我可以用一个简单的事件数据来呈现背景事件，如（）所示：

我还可以通过提示输入标题和基于标题（）的附加规则来完成此操作：

下面的代码也应该可以工作（），但它不能。通过模式添加常规事件不是问题，但只要是后台事件，就不会发生任何事情。从方程中删除

渲染：“background'，

，它就起作用了，所以出于某种原因，问题就出在这一行

但是，当背景事件在初始化或日历之外使用select完全正常工作时，为什么背景事件在模式中的行为会不同于正常事件

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');
});

---

关于如何解决这个问题有什么想法吗？

您遇到的问题与日期和

全天

参数有关。文件规定如下：

定时的背景事件将仅在议程视图中的时间段上呈现。全天的背景事件将仅在月视图或议程视图的全天时段中呈现

因此，您应该做的是检查正在使用的视图，并正确应用

全天

参数。将保存功能更新为：

$('#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');
});

这是我的建议

---

作为旁注，第二和第三小提琴之间的区别不仅仅是引导模式。在第二把小提琴上，您使用的是FullCalendar发送到

select

方法的

start

和

end

参数

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

---

但是，正如文档所述，正确的方法是全天发送

参数。
它似乎工作正常，您的小提琴工作正常。您是否正在使用
agendaWeek
？从文档中，定时的后台事件将仅在议程视图中的时间段上呈现。全天的背景事件将仅在“月”视图或“议程”视图的“全天时段”中呈现。@milz无论何时键入“假日”，都应创建背景事件。使用模式时，它会在议程视图上创建，但不会在月视图上创建，而使用提示符时，它也会在月视图上创建。我不知道为什么它会在日期上出现问题，因为它从输入中获得的任何内容都是最初在开始和结束中的内容。在第一个例子中，接受这样的日期没有问题：开始：'2016-10-01'。所以这很奇怪也很混乱，哈哈。这让我看错了方向，因为前两个病例不需要整天。无论如何，谢谢你的帮助！
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');
});

$('#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');
});