Fullcalendar timelineview - 恢复滚动位置答案

【问题标题】：Fullcalendar timelineview - Restore scroll positionFullcalendar timelineview - 恢复滚动位置
【发布时间】：2018-04-04 04:25:32
【问题描述】：

我使用了完整的日历时间轴视图。时间线视图每 30 秒自动刷新一次，使用 setInterval(function () { refreshEvents(); }, 30000);

对于刷新，我使用了 removeEvents 和 addEventSource 所以我需要在 removeEvents 之前获取时间线视图的垂直滚动位置，并在 addEventSource 之后恢复滚动位置，因为每个刷新滚动位置都会丢失

那么如何在自动刷新事件时恢复时间线视图的滚动位置

见以下代码：

$('#divCalendar').fullCalendar({
        resourceAreaWidth: 200,
        allDaySlot: false,
        timeFormat: 'HH:mm', // uppercase H for 24-hour clock
        slotLabelFormat: 'HH:mm', // uppercase H for 24-hour clock
        eventDurationEditable: false,
        header: {
                    left: 'today prev,next',
                    center: 'title',
                    right: 'timelineDay',
                },
         views: {
                    timelineDay: {
                        type: 'timeline',
                        slotDuration: '00:02:00'
                    }
                },
        resources: function (callback) {
                    // necessary hack
                    var view = $('#divCalendar').fullCalendar('getView');
                    $.ajax({
                        url: '/Dispatcher/GetTimeLineDriverList',
                        dataType: 'json',
                        cache: false,
                        data: {
                            start: view.start.format(),
                            end: view.end.format()
                        }
                    }).then(function (resources) {
                        callback(resources);
                    });
                },
        events: {
                    url: '/Dispatcher/GetDriverTripSchedules'
                },
});

 function refreshEvents() {
                var calenderDate = $('#divCalendar').fullCalendar('getDate').format("MM-DD-YYYY");
                $.ajax({
                    url: '/Dispatcher/GetDriverTripSchedules',
                    success: function (response) {
                        $('#divCalendar').fullCalendar('removeEvents');
                        $('#divCalendar').fullCalendar("addEventSource", response);
                    }
                });

}

 setInterval(function () { refreshEvents(); }, 30000);

【问题讨论】：

我也面临同样的问题
我试过这个： var scrollPosition = document.querySelector('.fc-scroller').scrollTop;用于获取当前滚动位置，但它总是返回 return 0

标签： fullcalendar-scheduler

【解决方案1】：

我解决此问题的唯一方法是在刷新前保存滚动条位置（以像素为单位），然后在刷新后重置。

打开浏览器检查器
右键单击全日历滚动条并选择检查
右键单击检查器中选择的元素
选择“复制选择器”

你应该得到这样的东西：

"#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td:nth-child(3) > div > div"

保存位置：

let querySel = "#calendar > div.fc-view-harness.fc-view-harness-active > div > table > tbody > tr > td:nth-child(3) > div > div"
let position = document.querySelector(querySel).scrollLeft

重新设置之前的位置：

document.querySelector(querySel).scrollLeft = position

请注意，您可以使用 .scrollLeft 或 .scrollTop，具体取决于您的视图类型。

这应该重置旧位置。

【讨论】：