fullCalendar 月视图下,自动定位到今天所在行 完整代码
时间: 2024-02-28 12:54:15 浏览: 161
完整的代码如下:
```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');
// 获取所有日期元素
var allDayCells = $('.fc-day');
// 遍历所有日期元素
for(var i=0; i<allDayCells.length; i++){
var cell = allDayCells[i];
// 如果该日期元素包含今天的日期,则滚动到该元素所在行
if($(cell).data('date') == today){
var row = $(cell).closest('.fc-row');
var top = row.position().top;
$('.fc-scroller').scrollTop(top);
break;
}
}
}
});
});
</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>
```
这里引入了 FullCalendar 的相关依赖库,并在页面加载完成后初始化 FullCalendar 实例。在 `viewRender` 回调函数中,实现了自动定位到今天所在行的功能。最后通过 CSS 设置了日历表格的样式。
阅读全文