div class="one_answers">
我正在使用全日历.js作为我网站的预订系统。我正在使用函数
$('#calendar').fullCalendar('gotoDate', new Date());
面临的问题是它将我带到日历中的所需日期，但我也想移动到日历中的特定时间跨度。
有人可以在这一点上帮助我吗？
谢谢马诺伊。
好吧，我找不到任何动态滚动到FullCalendar中时间段的解决方案，所以我在这里所做的是，在单击div时，我将时间传递给function scrollToTime(time)。
<div class="button">Scroll to time dynamically</div>
为函数传递时间
$(document).on('click', '.button', function () {
var time = '15:30:00';
scrollToTime(time);
});
我已经$('.fc-axis') targets并循环浏览它以检查日历时间段是否与我点击div经过的时间相同。如果条件为 true，请document body滚动到项目的顶部位置，如下所示：
function scrollToTime(time) {
var targets = $('.fc-axis');
$.each(targets, function () {
var scrollable = $(this),
closestTime = $(this).closest('tr').data('time');
if (closestTime === time) {
$([document.documentElement, document.body]).animate({
scrollTop: scrollable.offset().top - 100
}, 1000);
}
});
};
也许，这不是一个好方法，必须在插件中添加动态滚动的逻辑，但现在没有动态滚动的选项，FullCalendar 中唯一的可能性是设置初始滚动。检查 scrollTime 以获取更多详细信息，您还可以检查此方法以滚动到时间 #467<</p>
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-02',
defaultView: 'month',
slotDuration: '00:10:00',
minTime: "8:00:00",
maxTime: "20:00:00",
selectable: true,
selectHelper: true,
dayClick: function(date, jsEvent, view) {
if (view.name == 'month') {
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', start);
}
else {
alert('Clicked on: ' + date.format());
alert('Current view: ' + view.name);
}
},
editable: true,
eventClick: function(event, element) {
alert(event.title + " click on " + event.start.format() + " end time " + event.end.format());
},
eventDrop: function(event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
$('#calendar').fullCalendar('rerenderEvents')
}
alert(event.title + " was dropped on " + event.start.format() + " end time " + event.end.format());
},
eventResize: function(event, delta, revertFunc) {
if (!confirm("Are you sure about this change?")) {
revertFunc();
$('#calendar').fullCalendar('rerenderEvents');
}
},
eventLimit: true,
views: {
agenda: {
eventLimit: 2 // adjust to 6 only for agendaWeek/agendaDay
}
},
events: [
{
id: 9,
title: 'dinner',
start: '2015-02-16T10:00:00',
end: '2015-02-16T10:30:00'
},
{
id: 9,
title: 'lunch',
start: '2015-02-17T10:00:00',
end: '2015-02-17T10:30:00'
},
{
id: 9,
title: 'breakfast',
start: '2015-02-18T10:00:00',
end: '2015-02-18T10:30:00'
},
{
id: 9,
title: 'full event',
start: '2015-02-17',
end: '2015-02-17'
}
]
});