fullCalendar的月视图下,如何将today按钮在本月时禁用,其他月份正常使用 完整代码
时间: 2023-12-24 10:02:49 浏览: 147
可以通过 `viewRender` 事件来实现这个功能。在 `viewRender` 事件中,我们可以获取当前视图的日期范围,然后判断今天是否在该范围内,从而决定是否禁用 `today` 按钮。
以下是一个完整的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css' rel='stylesheet' />
<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.2/fullcalendar.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
defaultDate: new Date(),
navLinks: true,
editable: true,
eventLimit: true,
viewRender: function(view) {
var now = moment();
var start = moment(view.activeStart);
var end = moment(view.activeEnd);
if (now.isBetween(start, end, null, '[]')) {
calendar.setOption('customButtons', {
today: {
click: function() {
calendar.changeView('dayGridMonth', now);
},
enabled: false // 禁用 today 按钮
}
});
} else {
calendar.setOption('customButtons', {
today: {
click: function() {
calendar.today();
},
enabled: true // 启用 today 按钮
}
});
}
},
events: [
{
title: 'Event 1',
start: '2021-10-01'
},
{
title: 'Event 2',
start: '2021-10-05',
end: '2021-10-07'
},
{
title: 'Event 3',
start: '2021-10-09T12:30:00',
allDay: false
}
]
});
calendar.render();
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
```
在 `viewRender` 事件中,我们首先获取当前时间 `now`,以及当前视图的起始日期 `start` 和结束日期 `end`。然后使用 `isBetween` 方法判断今天是否在该范围内。如果是,则禁用 `today` 按钮,并设置自定义按钮选项;否则启用 `today` 按钮,并设置自定义按钮选项。最后使用 `setOption` 方法设置自定义按钮选项。
注意,这个示例代码使用了 Moment.js 库来处理日期和时间,需要先引入 Moment.js 库。同时,这个示例代码只针对 `dayGridMonth` 视图进行了处理,如果需要在其他视图下禁用 `today` 按钮,需要对代码进行相应的修改。
阅读全文