Question

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

我能够使用像这样的简单事件数据（working jsfiddle）渲染背景事件：

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

我也可以使用标题提示和基于标题的其他规则（working fiddle）来执行此操作：

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

这是updated jsfiddle。

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

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

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

由Bootstrap模式创建时不会呈现背景事件

1 个答案: