fullCalendar月视图,自动定位到今天所在行,完整代码
时间: 2024-03-02 15:54:19 浏览: 165
以下是一个使用fullCalendar实现月视图自动定位到今天所在行的完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用fullCalendar实现月视图自动定位到今天所在行示例</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' />
</head>
<body>
<div id='calendar'></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
// 设置默认视图为月视图
defaultView: 'month',
// 设置日历开始日期为当前日期
defaultDate: moment(),
events: [{
title: 'Event 1',
start: '2021-08-20T10:00:00',
end: '2021-08-20T12:00:00'
}, {
title: 'Event 2',
start: '2021-08-22T14:00:00',
end: '2021-08-22T16:00:00'
}, {
title: 'Event 3',
start: '2021-08-24T09:00:00',
end: '2021-08-24T11:00:00'
}, {
title: 'Event 4',
start: '2021-08-26T16:00:00',
end: '2021-08-26T18:00:00'
}, {
title: 'Event 5',
start: '2021-08-28T12:00:00',
end: '2021-08-28T14:00:00'
}, {
title: 'Event 6',
start: '2021-08-30T10:00:00',
end: '2021-08-30T12:00:00'
}],
// 在日历加载完成后自动定位到今天所在行
viewRender: function(view, element) {
var today = moment();
var firstDay = view.calendar.getDate();
var lastDay = moment(firstDay).endOf('month');
if (today > firstDay && today < lastDay) {
var todayIndex = today.date() + firstDay.day() - 1;
var row = Math.floor(todayIndex / 7) + 1;
$('.fc-content-skeleton tbody tr:nth-child(' + row + ')').addClass('today-row');
}
}
});
});
</script>
<style>
.today-row {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</body>
</html>
```
在这个示例中,我们使用了fullCalendar库来创建一个日历,然后使用events选项来设置一些事件。我们还设置了默认视图为月视图,并将日历开始日期设置为当前日期。接下来,我们使用了viewRender回调函数来自动定位到今天所在的行。在这个回调函数中,我们首先获取今天的日期和当前视图的第一天和最后一天。然后,我们计算出今天在当前视图中的索引,并将其所在的行添加一个特殊的CSS类(today-row)。最后,我们使用CSS样式来将今天所在的行突出显示。
阅读全文