fullCalendar5.0版本,在月视图模式下切换到当月时自动定位到今天所在行,不使用viewRender
时间: 2024-03-05 14:48:57 浏览: 106
jQuery日程管理插件fullcalendar使用详解
如果您不想使用 `viewRender` 回调函数,也可以使用 `datesSet` 回调函数来实现自动定位到今天所在行的功能。
`datesSet` 回调函数会在用户切换日历的日期范围时被调用,您可以在其中获取当前月份的第一天和最后一天,然后判断今天是否在这个范围内。如果是,就获取今天所在行的日期范围,然后调用 `scrollToTime` 方法将日历滚动到该行。
以下是示例代码:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
// event sources...
],
datesSet: 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.scrollToTime(today);
calendar.scrollTo(0, top + (bottom - top) / 2);
}
}
}
});
calendar.render();
});
```
在上面的代码中,我们在 `datesSet` 回调函数中获取当前月份的第一天和最后一天,并判断今天是否在这个范围内。如果是,就获取今天所在行的日期范围。
然后,我们调用 `scrollToTime` 方法将日历滚动到当前日期。
最后,我们通过 `scrollTo` 方法将日历滚动到今天所在行的中心位置。
阅读全文