jquery 使用fullcalendar自动滚动到timelineWeek视图的当前日期

vm0i2vca 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(208)

我正在使用Rails 4和fullCalendar，并希望实现以下功能：
使用timelineWeek视图自动将我的“现在”指示器滚动到当前日期时间。我所有的资源都在Y轴上。我在使用timelineWeek视图实现此功能时遇到了问题。有人能帮忙吗？
我尝试了以下代码，但没有进展：

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

还使用了这个：

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

还有这个

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

上面的代码可以完美的工作在CubaWeek视图。唯一的问题是timelineWeek视图。

jquery

来源：https://stackoverflow.com/questions/47301339/automatic-scrolling-to-current-date-in-timelineweek-view-using-fullcalendar

2条答案

按热度按时间

sdnqo3pr1#

我已经想出了一个办法，也许还有别的办法。
我决定在viewRender函数中加入滚动，因为它在初始加载和更改日期时都会被调用。
现在，首先我检查当前时间是否在我的视图中，并且我们设置了插槽宽度。然后计算有多少个插槽，直到当前插槽和计算左滚动。根据您的需要修改它：我想把它放在最左边的负荷上显示。

if (moment().isBetween(view.start, view.end) && view.timeGrid.slotWidth !== undefined) {
    var scrollSlots = moment.duration(moment() - view.start) / moment.duration(view.viewSpec.overrides.slotDuration);
    var slotWidth = view.timeGrid.slotWidth;
    var scroll = {left: scrollSlots * slotWidth - $('.fc-time-area').width() / 4};
    view.addScroll(scroll);
}

最终结果：加载（裁剪资源）。这是月视图，200 slotWidth。

赞(0）回复(0）举报 2023-10-17

vx6bjr1n2#

我正在使用React，但我认为你可以应用相同的解决方案：
1.使用以下prop将className放入nowIndicator：
nowIndicatorClassNames=“fc-now-indicator”
1.选择元素并使用“scrollIntoViewAPI”：
document. querylist（“.fc-now-indicator”）？.scrollIntoView（{block：}）;
在react中，解决方案是这样的：

React.useEffect(()=>{
  document.querySelector(".fc-now-indicator")?.scrollIntoView({block: "center"});
},[])

return( 
  <FullCalendar {...props} nowIndicatorClassNames="fc-now-indicator" />
)

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 使用fullcalendar自动滚动到timelineWeek视图的当前日期

2条答案

相关问题

热门标签

最新问答