我在单击按钮时打开的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>
正如您所看到的,事件放置不正确,时间与日历显示的行不匹配...
有趣的是,如果我手动输入一个新事件,那么一切都会移动一点并自动对齐时间。
有没有办法纠正这个?