javascript 使全日历滚动到当前时间?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3317940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 00:50:11  来源:igfitidea点击:

Making fullcalendar scroll to the current time?

javascriptjqueryruby-on-railsfullcalendar

提问by amr

Simply put, is there a way to have fullcalendar scroll to the current time position in the week view?

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

If it helps, I'm using Ruby on Rails and jQuery

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

采纳答案by bjg

Do you mean that you want the calendar to display, automatically centered around the current time of day (of render time)?

你的意思是你想让日历显示,自动以当前时间(渲染时间)为中心?

Assuming that you are happy that the day columns are always in the same place there is the firstHouroption in the agendaWeekview which might work for you.

假设您很高兴日期列始终位于同一位置firstHour,那么agendaWeek视图中的选项可能适合您。

For illustration, let's assume that the number of hours on the Y-axix in your given view is 10 then something like:

为了说明,让我们假设给定视图中 Y 轴上的小时数为 10,然后类似于:

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

More details on view controls are available here

此处提供有关视图控件的更多详细信息

回答by Gabriel Glenn

This is what I used to scroll to the current time in the view :

这是我用来在视图中滚动到当前时间的内容:

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

For UX purpose, I rounded down to the nearest hourso user can clearly see where (when) the calendar view is :

出于 UX 目的,我四舍五入到最近的小时,以便用户可以清楚地看到日历视图的位置(何时):

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

Check the fullCalendar scrollTimeparameter.

检查 fullCalendarscrollTime参数。

回答by Alex Barroso

On v2 this has changed, here is how to do it in this new version:

在 v2 上这已经改变了,这是在这个新版本中如何做到的:

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

回答by Mashinax

If you need to set Options Dynamically (after a calendar has already been initialized) then the right way to do this is by using thislink

如果您需要动态设置选项(在日历已经初始化之后),那么正确的方法是使用链接

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

回答by okliv

For fullcalendar@^4.3.0 i used scrollToTimefunction with calendar's render range start:

对于 fullcalendar@^4.3.0,我使用了带有日历渲染范围开始的scrollToTime函数:

calendar.state.dateProfile.renderRange.start

so it works for me in this way:

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

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

it works, by the way, no matter what is the defaultViewvalue is.

顺便说一下,无论defaultView值是多少,它都有效。

回答by egdavid

I had a similar problem and solved it with this solution...

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

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

回答by theycallmemorty

Use the today function:

使用今天的功能

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

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