Fullcalendar v2：如何在导航周期时保持相同的滚动时间？

在Fullcalendar 2上，当我在几周之间导航时，我想在垂直滚动中保持相同的时间范围。 例如，在下面的图片中，我最初的时间是从上午12点到下午3点。 但是当我按下下一个箭头去下一周时，它会在上午8点重置。

我知道我可以通过改变默认的开始时间

scrollTime: "08:00:00",

但我该如何做到这一点，以便垂直时间范围“固定”到我所处的位置？

---

不幸的是，这不是内置功能。 有一种解决方法，但是当你进入前一周/下一周时，你总会有一点点闪烁。

var scroll = -1,
    viewNames = ['agendaWeek', 'agendaDay'];

$('#calendar').fullCalendar({
    //...
    eventAfterAllRender: function(view) {
        if(scroll > -1 && viewNames.indexOf(view.name) !== -1)
            //Use a setTimeout hack here because the scrollTime will be set after eventAfterAllRender is processed.
            setTimeout(function(){                
                document.querySelector('.fc-agenda-slots').parentNode.parentNode.scrollTop = scroll;
            }, 0);
    },
    viewDestroy: function(view) {
        if(viewNames.indexOf(view.name) !== -1)
            scroll = document.querySelector('.fc-agenda-slots').parentNode.parentNode.scrollTop;
    }
    //...
});

的jsfiddle

此代码适用于FullCalendar v2。 它假定滚动div是.fc-agenda-slots div父级的父.fc-agenda-slots 。

---

工作代码与fullcalendar 2.6.1兼容

我从下面的帖子（A1rPun）开始了这段代码。

使用JSFiddle

var scroll = -1;

$('#calendar').fullCalendar({

    // init calendar
    header: {left: 'today prev,next, refresh title', 
    right: 'agendaDay,agendaWeek'},
    allDaySlot: false,
    defaultView: 'agendaDay',


    // when all the events are rendered, scroll to the previous saved scroll position
    eventAfterAllRender: function(view) {
        if(scroll > -1 && (view.name=='agendaDay' || view.name=='agendaWeek'))
            setTimeout(function(){
            document.querySelector('.fc-scroller').scrollTop = scroll;
        },0);
    },

    // when view is destroyed, we keep the scroll position in a variable
    viewDestroy: function(view) {
        if(view.name=='agendaDay' || view.name=='agendaWeek')
            scroll = document.querySelector('.fc-scroller').scrollTop;
    }

}); // end calendar

此解决方案正在“议程日程”和“议程周刊”中发表意见。 当你在它们之间切换时它也在工作。

我不认为这很漂亮，因为你需要等到所有的事件都呈现完毕。 您日历上的活动越多，滚动所需的时间就越多。

一个好的解决方案是使用

Fullcalendar选项scrollTime

你可以像这样在viewRender中设置它。 这会使日历滚动到这个时间。

viewRender: function(view, element){
    view.options.scrollTime = '09:00:00';
}

也许有一种方法可以将滚动值转换为时间，然后将其呈现给日历。

编辑1

我发现使用viewRender回调方法会更好，而不是使用eventAfterAllRender回调来设置滚动位置。

这里是JSFiddle

viewRender: function(view, element){

        if(scroll > -1 && (view.name=='agendaDay' || view.name=='agendaWeek')){
                    setTimeout(function(){
                    document.querySelector('.fc-scroller').scrollTop = scroll;
                },0);

            }
        },

它允许在其他wiews（月，basicWeek ...）之间切换并保持滚动。 而且速度更快

---

我拥有的是：

var height =  $(window).scrollTop();
console.log("current height " + height);

$('#calendar').fullCalendar(  'removeEvents');
$('#calendar').fullCalendar(  'addEventSource', e);
$('#calendar').fullCalendar(  'addEventSource', holiday);
$('#calendar').fullCalendar(  'refetchEvents');

window.scrollTo(0,height);
console.log("scroll to " + height);

它适用于我

链接地址: http://www.djcxy.com/p/82063.html

上一篇: Fullcalendar v2: How to maintain the same scroll time when navigating weeks?

下一篇: How to export Image list of 32bit icons into single 32bit bitmap file?