使用fullCalendar的gotoDate()方法和getDate()方法结合viewRender起来实现自动定位到今天所在行的效果 完整代码
时间: 2024-02-28 13:54:16 浏览: 222
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/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/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
viewRender: function(view, element){
// 获取今天的日期
var today = moment().format('YYYY-MM-DD');
// 如果当前视图不是月视图,直接返回
if(view.name != 'month'){
return;
}
// 跳转到今天的日期
$('#calendar').fullCalendar('gotoDate', today);
// 获取今天所在的日期元素
var todayCell = $('.fc-day[data-date="' + today + '"]');
// 获取今天所在的行
var row = todayCell.closest('.fc-row');
// 滚动到行的位置
var top = row.position().top;
$('.fc-scroller').scrollTop(top);
}
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
```
在 `viewRender` 回调函数中,通过 `gotoDate` 方法将当前视图跳转到今天的日期。然后通过 `getDate` 方法获取今天所在的日期元素,再通过 `closest` 方法找到该元素所在的行。最后通过设置 `.fc-scroller` 的 scrollTop 属性实现自动滚动到该行。这种方法比之前的方法更加简洁和易于理解。
阅读全文