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

Question

我使用1年视图的计划程序。所以我可以从1月1日到12月31日每天通过水平滚动查看。

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

我正在寻找通过查找当前日期和ScrollLeft到元素的jQuery滚动。但看起来标题与滚动容器是分开的，所以不知道如何工作。

Answer 1

对于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) 

Answer 2

我遇到了同样的问题，就在昨天，发现如下解决方案（与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); 
} 

希望这有助于（这是我对堆栈溢出的第一篇文章）。