Question

我在我的网站上使用fullcalendar.js预订系统。我正在使用功能

$('#calendar').fullCalendar('gotoDate', new Date());

我面临的问题是我需要在日历中输入所需的日期，但我还想转到日历中的特定时间范围。

有人可以帮我解决这个问题吗？

由于的Manoj。

Answer 1

好吧，我找不到用于动态滚动到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所经过的时间相同。如果条件成立，请滚动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中唯一的可能性是设置初始滚动。检查Font Awesome Documentation了解更多详细信息，您也可以选中此scrollTime

Answer 2

＆＃13;

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

＆＃13;

转到fullcalendar或任何特定事件中的特定日期时间

2 个答案: