我需要向我的日历添加事件过滤
我为此添加了一个特殊的选择以及一个应该更新日历的函数
但是我遇到了一个问题，这个功能只能运行一次。假设我启动日历，选择一个过滤器，所有内容都按其应有的方式显示。但是当我尝试立即将过滤器更改为另一个过滤器时，所有事件都完全消失了，问题出在哪里？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: [
{
title: 'Event 1',
start: '2024-01-01',
dataFilter: 'filter1'
},
{
title: 'Event 2',
start: '2024-01-02',
dataFilter: 'filter2'
},
],
eventClick: function(info) {
alert('Event: ' + info.event.title);
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
calendar.render();
var filterSelect = document.getElementById('filterSelect');
filterSelect.addEventListener('change', function() {
var selectedFilter = filterSelect.value;
var filteredEvents = calendar.getEvents().filter(function(event) {
return selectedFilter === 'all' || event.extendedProps.dataFilter === selectedFilter;
});
calendar.setOption('events', filteredEvents);
});
});
</script>
</head>
<body>
<label for="filterSelect">Select event:</label>
<select id="filterSelect">
<option value="all">All events</option>
<option value="filter1">Event 1</option>
<option value="filter2">Event 2</option>
</select>
<div id="calendar"></div>
</body>
</html>一点点调试显示，在您首先按“事件 1”过滤后，
filteredEventscalendar.getEvents()将事件保存在 FullCalendar 初始化之外的单独变量中，以便您在过滤时可以再次使用该原始数据集：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js"></script>
<script>
let events = [
{
title: 'Event 1',
start: '2024-01-01',
dataFilter: 'filter1'
},
{
title: 'Event 2',
start: '2024-01-02',
dataFilter: 'filter2'
},
];
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
events: events,
eventClick: function(info) {
alert('Event: ' + info.event.title);
},
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
});
calendar.render();
var filterSelect = document.getElementById('filterSelect');
filterSelect.addEventListener('change', function() {
var selectedFilter = filterSelect.value;
var filteredEvents = events.filter(function(event) {
return selectedFilter === 'all' || event.dataFilter === selectedFilter;
});
calendar.setOption('events', filteredEvents);
});
});
</script>
</head>
<body>
<label for="filterSelect">Select event:</label>
<select id="filterSelect">
<option value="all">All events</option>
<option value="filter1">Event 1</option>
<option value="filter2">Event 2</option>
</select>
<div id="calendar"></div>
</body>
</html>