fullcalendar3.6.2版本增加搜索框
时间: 2023-09-14 09:11:33 浏览: 116
fullcalendar 3.6.2 版本本身并没有提供搜索框的功能,但你可以通过自定义实现。以下是一个简单的例子:
1. 添加一个搜索框的 HTML 代码:
```html
<input type="text" id="searchInput" placeholder="搜索...">
```
2. 在 fullcalendar 的 `header` 选项中添加搜索框:
```javascript
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay',
// 在右侧添加搜索框
right: 'searchInput'
},
```
3. 监听搜索框的 `input` 事件,在事件处理函数中过滤事件:
```javascript
// 获取 fullcalendar 实例
var calendar = $('#calendar').fullCalendar('getCalendar');
// 监听搜索框的输入事件
$('#searchInput').on('input', function() {
var keyword = $(this).val();
// 过滤事件
calendar.getEvents().forEach(function(event) {
if (event.title.indexOf(keyword) >= 0) {
event.show();
} else {
event.hide();
}
});
});
```
注意,这只是一个简单的例子,实际上你可能需要更复杂的逻辑来实现一个完整的搜索功能。
阅读全文