使全日历滚动到当前时间？

Question

简单来说，有没有办法让全日历滚动到周视图中的当前时间位置？

如果有帮助，我正在使用 Ruby on Rails 和 jQuery

Answer 1

这就是我用来在视图中滚动到当前时间的方法：

var scrollTime = moment().format("HH:mm:ss");
$('#calendar').fullCalendar({
    now: today,
    scrollTime: scrollTime
});

出于用户体验目的，我四舍五入到最接近的小时，以便用户可以清楚地看到日历视图的位置（时间）：

var scrollTime = moment().format("HH") + ":00:00";
$('#calendar').fullCalendar({
    now: today,
    scrollTime: scrollTime
});

检查 fullCalendar

scrollTime

参数。

Answer 2

您的意思是您希望显示日历，自动以当前时间（渲染时间）为中心吗？

假设您很高兴日期列始终位于同一位置，则

firstHour

视图中的

agendaWeek

选项可能适合您。

为了便于说明，我们假设给定视图中 Y 轴上的小时数为 10，则类似于：

var firstHour = new Date().getUTCHours() - 5;
$('#calendar').fullCalendar({
  firstHour: firstHour;
});

有关视图控件的更多详细信息请参见此处

Answer 3

在 v2 上这已发生变化，以下是在新版本中执行此操作的方法：

$('#calendar').fullCalendar({
    defaultView: 'agendaWeek',
    scrollTime: '09:00:00'
});

Answer 4

版本3：0+

初始化时

对于与每周视图上的某个时间匹配的初始滚动位置：

$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
scrollTime: '09:00:00'

});

初始化后

初始化后动态更改/设置滚动位置（例如，周视图中的下午 1:00）： （没有记录的方法可以工作，但这个黑客:)）

$(".fc-scroller").animate({
    scrollTop: $('[data-time="13:00:00"]').position().top // Scroll to 01:00 pm
}, 1000);

Answer 5

我有一个类似的问题并用这个解决方案解决了......

setTimeout(function(){ // Timeout
    $(".fc-today").attr("id","scrollTo"); // Set an ID for the current day..
    $("html, body").animate({
        scrollTop: $("#scrollTo").offset().top // Scroll to this ID
    }, 2000);
}, 500);    

Answer 6

如果您需要动态设置选项（日历已初始化后） 那么正确的方法是使用 this 链接

var scrollTime = '10:00:00'; //replace this any time you need
$('#calendar').fullCalendar('option', 'scrollTime', scrollTime);

Answer 7

对于 fullcalendar@^4.3.0 我使用了 scrollToTime 函数，日历的渲染范围开始：

calendar.state.dateProfile.renderRange.start

所以它以这种方式对我有用：

    var calendarEl = document.getElementById('scheduler');
    var calendar = new FullCalendar.Calendar(calendarEl, { ... })

    var now = new Date();
    var rangeStart = calendar.state.dateProfile.renderRange.start;

    // attention here
    calendar.scrollToTime(now - rangeStart);

顺便说一下，无论

defaultView

值是多少，它都有效。

Answer 8

使用此功能，它适用于所有版本的 fullcalender :-

function scroll_to_current_time(currentSlotDuration){
        console.log("scroll_to_current_time : ",currentSlotDuration);
        setTimeout(function() {
            var targetTime;
            if (currentSlotDuration === "00:05:00") {
                targetTime = moment().subtract(3, 'hours');
            } else if (currentSlotDuration === "00:10:00") {
                targetTime = moment().subtract(7, 'hours'); 
            } else {
                targetTime = moment().startOf('day');
            }
            //console.log("Target time:", targetTime.format("HH:mm:ss"));
            var startOfDay = moment().startOf('day');
            var minutesDiff = targetTime.diff(startOfDay, 'minutes');
            //console.log("minutesDiff:", minutesDiff);
            var slotElement = $('.fc-slats .fc-minor').first();
            var slotWidth = slotElement.outerWidth();
            console.log("Calculated slotWidth:", slotWidth);
            var slotDurationMinutes = getSlotDurationInMinutes(currentSlotDuration);
            console.log("slotDurationMinutes:", slotDurationMinutes);
            var scrollPosition = (minutesDiff / slotDurationMinutes) * slotWidth;
            console.log("scrollPosition:", scrollPosition);
            if (!isNaN(scrollPosition)) {
                $('.fc-scroller').scrollLeft(scrollPosition);
            } else {
                console.error("Error: scrollPosition is NaN. Check slotWidth and slotDurationMinutes.");
            }
        }, 10);
    }

Answer 9

使用今天功能：

$('#calendar').fullCalendar('today');