Question

我正在使用具有1年视图的调度程序。所以我可以从1月1日到12月31日每天都看到水平滚动。

小问题是水平滚动始终处于初始位置（一直向左），所以它总是显示1月1日。有没有办法在初始加载时滚动到当前日期或月份？

我正在寻找使用jQuery滚动浏览它，找到当前日期和ScrollLeft元素。但似乎标题与滚动容器是分开的，因此不确定它是如何工作的。

Answer 1

我昨天遇到了同样的问题并找到了以下解决方案（使用fullCalendar 2.6.1）：

// Scroll the calendar to a specific event
scrollToEvent: function(event) {
    // Get the "scroller" divs for header and content
    var headerScroller = $('.fc-time-area.fc-widget-header > .fc-scrollpane > div');
    var contentScroller = $('.fc-time-area.fc-widget-content > .fc-scrollpane > div');

    // Get the destination date
    // For some reason event.start.format('YYYY-MM-DDTHH:mm:ss') will be formatted 
    // as 'YYYY-MM-DDAHH:mm:ss', hence the "replace" hack.
    // Maybe I have to dig more into moment js...
    var dateSelector = 'th[data-date="' + event.start.format('YYYY-MM-DDTHH:mm:ss').replace('A', 'T') + '"]';
    var date = $(dateSelector).last()[0];

    // Scroll to date
    headerScroller.scrollLeft(date.offsetLeft);
    contentScroller.scrollLeft(date.offsetLeft);

    // To scroll vertically to a specific resource (if any)...
    // Get the destination resource
    var resourceSelector = 'tr[data-resource-id="' + event.resourceId + '"]';
    var resource = $(resourceSelector).last()[0];

    // Scroll to resource
    contentScroller.scrollTop(resource.offsetTop);
}

我从＆＃34; eventAfterAllRender＆＃34;调用了上述函数。 FullCalendar的功能，使用标志来检查第一个渲染。不知道是否有更好的方法......

只需滚动到日期的简单代码：

scrollToDate: function(date) {
    // Get the "scroller" (no need to distinguish between header and content so get both)
    var scroller = $('.fc-time-area > .fc-scrollpane > div');

    // Get the destination date
    var selector = 'th[data-date="' + date.format('YYYY-MM-DDTHH:mm:ss') + '"]';
    var date = $(selector).last()[0];

    // Scroll to date
    scroller.scrollLeft(date.offsetLeft);
}

希望这会有所帮助（这是我在Stack Overflow上的第一篇文章）。

Answer 2

对于2.6.1版本

eventAfterAllRender: function (view) {
    var viewStartDate;
    if (view.name == 'yearView') {
        viewStartDate = new Date(new Date().getFullYear(), 0, 1);
    }
    else if (view.name == 'twoMonthView' || view.name == 'oneMonthView') {
        viewStartDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
    }

    if (view.name == 'oneWeekView') {
        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(4 * 12 * (moment().weekday() - 1) * view.options.slotWidth);
    }
    else {
        var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

        $('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);
    }
}

这是2.6.1版本的主要部分

var dateDiff = (new Date().setHours(0, 0, 0, 0) - viewStartDate) / (1000 * 60 * 60 * 24);

$('.fc-body .fc-time-area .fc-scrollpane').children('div').scrollLeft(Math.round(dateDiff) * view.options.slotWidth);

在3.0+版本中，HTML的结构不同。滚动的元素已更改。

$('.fc-body .fc-time-area .fc-scroller-clip .fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

可能会将其降低到

$('.fc-scroller').scrollLeft(Math.round(dateDiff) * view.options.slotWidth)

FullCalendar计划程序滚动到当前日期

2 个答案: