fullCalendar5.0版本,在月视图模式下切换到当月时自动定位到今天所在行
时间: 2024-03-05 20:48:56 浏览: 147
fullCalendar 增加年视图版
5星 · 资源好评率100%
可以通过 fullCalendar 的 `gotoDate` 方法和 `viewRender` 回调函数实现自动定位到今天所在行的功能。
首先,在 `viewRender` 回调函数中获取当前月份的第一天和最后一天,然后判断今天是否在这个范围内。如果是,就获取今天所在行的日期范围,然后调用 `gotoDate` 方法将视图滚动到该行。
以下是示例代码:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
// event sources...
],
viewRender: function(info) {
var view = info.view;
var today = new Date();
var startOfMonth = view.currentStart;
var endOfMonth = view.currentEnd;
if (today >= startOfMonth && today <= endOfMonth) {
var dayEl = info.el.querySelector('.fc-day-today');
if (dayEl) {
var dayRect = dayEl.getBoundingClientRect();
var viewRect = info.el.getBoundingClientRect();
var top = dayRect.top - viewRect.top;
var bottom = top + dayRect.height;
calendar.gotoDate(today);
calendar.scrollTimeIntoView({ start: today, end: today });
calendar.scrollTo(0, top + (bottom - top) / 2);
}
}
}
});
calendar.render();
});
```
在上面的代码中,我们首先通过 `viewRender` 回调函数获取当前月份的第一天和最后一天,并判断今天是否在这个范围内。如果是,就获取今天所在行的日期范围。
然后,我们调用 `gotoDate` 方法将视图滚动到当前日期,并调用 `scrollTimeIntoView` 方法将当前日期滚动到可见区域。
最后,我们通过 `scrollTo` 方法将视图滚动到今天所在行的中心位置。
阅读全文