fullCalendar的月视图下决定是否禁用 today 按钮,完整代码
时间: 2024-02-01 15:13:29 浏览: 194
你可以通过以下代码禁用 fullCalendar 月视图下的 today 按钮:
```javascript
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
// 其他配置项
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
// 禁用 today 按钮
viewRender: function(view, element) {
if (view.type === 'dayGridMonth') {
element.find('.fc-today-button').prop('disabled', true);
}
}
});
calendar.render();
});
```
这个代码块会在 DOM 加载完成后创建一个 fullCalendar 实例,并在月视图下禁用 today 按钮。你可以根据你的实际需求调整代码中的配置项。
相关问题
fullCalendar的月视图下本月禁用 today 按钮,其他月份正常使用。完整代码
你可以通过 `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 时设置该回调函数。
fullCalendar的月视图下,如何将today按钮在本月时禁用,其他月份正常使用 完整代码
可以通过 `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` 按钮,需要对代码进行相应的修改。
阅读全文