Fullcalendar错误放置事件

时间:2016-05-27 12:36:38

标签: javascript fullcalendar

我在单击按钮时打开的jquery对话框中使用fullcalendar。

日历如下所示:

<script>
$(document).ready(function() {
    calendar = $( "#calendar" ).fullCalendar({
        height: 400,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,month'
        },
        defaultView: 'agendaWeek',
        slotDuration: '00:60:00',
        slotLabelFormat:"HH:mm",
        timeFormat: 'H(:mm)',
        firstDay: 1,
        allDaySlot: false,
        selectOverlap: false,
        selectable: true,
        selectHelper: true,
        editable: false,
        eventStartEditable: false,
        eventDurationEditable: false,
        eventLimit: true,
        select: function(start, end) {
            var title = prompt('Purpose of this booking:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true);
            }
            $('#calendar').fullCalendar('unselect');
        },

        events: [
            {
                title: 'Test1',
                start: '2016-05-26T10:00:00',
                end: '2016-05-26T16:00:00',
                allDay: false

            },
            {
                title: 'Test2',
                start: '2016-05-27T14:00:00',
                end: '2016-05-27T18:00:00',   
                allDay: false
            }
        ]   
    });
} );

$(function() {
    dialog = $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 610,
        width: 900,
        modal: true
    });

    $( ".btn-book" ).button().on( "click", function() {
        dialog.dialog( "open" );
        $('#calendar').fullCalendar( 'rerenderEvents');
        $('#calendar').fullCalendar('render');
    });
});
</script> 

<button class='btn-book' type='button'>Book</button>

<div id="dialog-form" title="Book resource">
    <form>
        <div id='calendar'></div>
        <input type="submit"/>
    </form>
</div>

这是第一次呈现事件的方式: enter image description here

正如您所看到的,事件放置不正确,时间与日历显示的行不匹配...

有趣的是,如果我手动输入一个新事件,那么一切都会移动一点并自动对齐时间。

enter image description here

有没有办法纠正这个?

0 个答案:

没有答案