fullCalendar月视图下,在每次切换月份时自动定位到当天所在行 ,完整代码
时间: 2024-02-24 18:54:59 浏览: 159
好的,我可以为您提供一个基于fullCalendar的月视图,在每次切换月份时自动定位到当天所在行的代码。以下是完整的代码:
```javascript
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
defaultDate: new Date(),
navLinks: true,
editable: true,
eventLimit: true,
events: [
{
title: 'Event 1',
start: '2019-12-01'
},
{
title: 'Event 2',
start: '2019-12-05',
end: '2019-12-07'
},
{
title: 'Event 3',
start: '2019-12-09T12:30:00',
allDay: false // will make the time show
}
// more events here
],
viewRender: function(view, element) {
// get today's date
var today = moment();
// find the current view's start date
var viewStart = moment(view.start);
// find the current view's end date
var viewEnd = moment(view.end);
// if today is within the current view's date range
if (today >= viewStart && today <= viewEnd) {
// get the number of days between the view's start date and today
var dayDiff = today.diff(viewStart, 'days');
// find the row that contains today's date
var todayRow = $('tr.fc-week:eq(' + dayDiff + ')');
// scroll to the row that contains today's date
$('html,body').animate({
scrollTop: todayRow.offset().top - 100
}, 'slow');
}
}
});
});
```
在这个代码中,我们使用了fullCalendar插件来创建一个月视图的日历。我们使用了`viewRender`回调函数来检查当前视图是否包含今天的日期,并找到包含今天日期的行,然后使用jQuery的`animate()`函数将页面滚动到该行。
请注意,为了使这个代码正常工作,您需要将fullCalendar和jQuery的库文件引入到您的HTML页面中。
阅读全文