javascript - FullCalendar Scheduler 滚动到当前日期

Question

我正在使用具有 1 年 View 的调度程序。所以我可以通过水平滚动查看从 1 月 1 日到 12 月 31 日的每一天。

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

我正在研究通过查找当前日期和元素的 ScrollLeft 来使用 jQuery 滚动它。但似乎 header 与滚动容器是分开的，所以不确定它是如何工作的。

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);
}

我从 FullCalendar 的“eventAfterAllRender”函数中调用了上述函数，使用标志仅检查第一次渲染。不知道有没有更好的方法...

滚动到日期的更简单代码:

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 上的第一篇文章)。