full calendar 月视图情况下,在每次切换月份,当切换到当月时,自动定位到当天所在行,完整代码
时间: 2024-01-10 21:03:17 浏览: 78
好的,以下是使用 FullCalendar 实现月视图自动定位到当天所在行的完整代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FullCalendar Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: new Date(),
navLinks: true,
editable: true,
eventLimit: true,
events: [
{
title: 'Event 1',
start: '2019-06-01'
},
{
title: 'Event 2',
start: '2019-06-05',
end: '2019-06-07'
},
{
title: 'Event 3',
start: '2019-06-09T12:30:00',
allDay: false
}
// more events here
],
// 在每次切换月份时,自动定位到当天所在行
viewRender: function(view, element) {
// 获取当前日期
var today = moment();
// 获取当前月份中第一天的日期
var firstDay = view.start;
// 获取当前月份中最后一天的日期
var lastDay = view.end;
// 如果当前日期在当前月份中,则定位到当天所在行
if (today >= firstDay && today <= lastDay) {
// 获取当天所在行的索引
var index = $('.fc-day-number[data-date="' + today.format('YYYY-MM-DD') + '"]').parent('td').index();
// 定位到当天所在行
$('.fc-widget-content').animate({
scrollTop: index * 30 // 每行高度为30px
}, 500);
}
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
```
在这个代码中,我们使用了 FullCalendar 的 `viewRender` 回调函数,在每次切换月份时自动定位到当天所在行。具体实现步骤如下:
1. 获取当前日期,使用 Moment.js 库获取。
2. 获取当前月份中第一天和最后一天的日期,使用 FullCalendar 提供的 `view.start` 和 `view.end` 属性获取。
3. 判断当天日期是否在当前月份中,如果是则进行定位。
4. 获取当天所在行的索引,使用 jQuery 的选择器获取。
5. 定位到当天所在行,使用 jQuery 的 `animate` 方法实现滚动效果。
希望这个代码对你有帮助!
阅读全文