fullCalendar的月视图下本月禁用 today 按钮,其他月份正常使用。完整代码
时间: 2024-02-01 20:13:31 浏览: 140
你可以通过 `dayRender` 回调函数来实现这个功能。具体做法是,在 `dayRender` 回调函数中判断当前日期是否为当月的日期,如果是则禁用 today 按钮,否则正常使用。下面是一个示例代码:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth'
},
// 禁用 today 按钮
dayRender: function(info) {
var todayBtn = info.el.querySelector('.fc-today-button');
if (info.date.getMonth() === new Date().getMonth()) {
todayBtn.disabled = true;
} else {
todayBtn.disabled = false;
}
}
});
calendar.render();
});
```
在上述代码中,我们通过 `dayRender` 回调函数来获取当前日期 `info.date` 所在的月份,然后判断是否为当月的日期。如果是,则找到 today 按钮的 DOM 元素 `info.el.querySelector('.fc-today-button')` 并设置其 `disabled` 属性为 `true`,从而禁用 today 按钮。
注意,`dayRender` 回调函数会在每个日期单元格渲染时执行,因此需要在初始化 calendar 时设置该回调函数。
阅读全文