我以另一种方式工作，但是当我在列表视图中切换一个复选框时，即使事件没有，日期也会显示出来。所以现在我使用addEventSource和removeEventSource以不同的方式来实现这一点，以便不再在列表视图中呈现日期。
现在只有当我点击一个复选框时才会出现问题，没有任何反应。有任何想法吗？ 除了下面的代码之外，我还创建了一个fiddle，以便更轻松地查看它。
jQuery(document).ready(function($) {
var source99 = [
{
title: 'Lets see if this works',
start: '2017-09-14T13:00:00',
end: '2017-09-14T14:00:00',
allDay: '',
url: '',
color: '#7dc5d7',
catid: '99',
cat: 'all-events',
},
{
title: 'Another Test Event',
start: '2017-09-20T13:00:00',
end: '2017-09-20T14:00:00',
allDay: '',
url: '',
color: '#7dc5d7',
catid: '99',
cat: 'all-events',
},
];
var source100 = [
{
title: 'Test',
start: '2017-08-10T10:00:00',
end: '2017-08-12T12:00:00',
allDay: '',
url: '',
color: '#f98b22',
catid: '100',
cat: 'conferences',
},
{
title: 'Conference Event',
start: '2017-08-23T08:00:00',
end: '2017-08-23T09:30:00',
allDay: '',
url: '',
color: '#f98b22',
catid: '100',
cat: 'conferences',
},
];
var source101 = [
{
title: 'Skeet Shooting & Cookout',
start: '2017-09-30',
end: '2017-09-30',
allDay: '1',
url: '',
color: '#4776fd',
catid: '101',
cat: 'men',
},
{
title: 'Movie Night – “Greater”',
start: '2017-09-01',
end: '2017-09-01',
allDay: '1',
url: '',
color: '#4776fd',
catid: '101',
cat: 'men',
},
];
var source102 = [
{
title: 'Some Women’s Event',
start: '2017-08-23T08:00:00',
end: '2017-08-23T09:30:00',
allDay: '',
url: '',
color: '#b300ec',
catid: '102',
cat: 'women',
},
];
var source103 = [
{
title: 'A Youth Event',
start: '2017-08-21T15:15:00',
end: '2017-08-21T22:00:00',
allDay: '',
url: '',
color: '#36e4bc',
catid: '103',
cat: 'youth',
},
];
// Build Calendar
$("#calendar").fullCalendar({
displayEventEnd: true,
timeFormat: 'h:mm A',
theme: true,
//aspectRatio: 1.2,
header: {
left: 'basicWeek,listSixMonths,today',
center: 'title',
right: 'prev,next'
},
defaultDate: '2017-08-22',
defaultView: 'basicWeek',
views: {
basicWeek: {
titleFormat: 'MMMM D, YYYY'
},
listWeek: {
titleFormat: 'MMMM D, YYYY'
},
listSixMonths: {
type: 'list',
duration: {
months: 6
},
buttonText: '6 Month List',
titleFormat: 'MMMM D, YYYY'
},
},
viewRender: renderViewColumns,
eventSources: [
source99,
source100,
source101,
source102,
source103,
]
});
// Create Checkboxes
var checkboxContainer = `<ul class='ds-event-categories'>
<li id='cat99'><label><input id='all-events' type='checkbox' checked>All Events</label></li>
<li id='cat100'><label><input id='conferences' type='checkbox' checked>Conferences</label></li>
<li id='cat101'><label><input id='men' type='checkbox' checked>Men</label></li>
<li id='cat102'><label><input id='women' type='checkbox' checked>Women</label></li>
<li id='cat103'><label><input id='youth' type='checkbox' checked>Youth</label></li>
</ul>`;
// Append it to FullCalendar.
$(".fc-toolbar").after(checkboxContainer);
// Click handler
$("#all-events").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'source99');
} else {
$('#calendar').fullCalendar('removeEventSource', 'source99');
}
});
$("#conferences").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'source100');
} else {
$('#calendar').fullCalendar('removeEventSource', 'source100');
}
});
$("#men").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'source101');
} else {
$('#calendar').fullCalendar('removeEventSource', 'source101');
}
});
$("#women").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'source101');
} else {
$('#calendar').fullCalendar('removeEventSource', 'source101');
}
});
$("#youth").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', 'source102');
} else {
$('#calendar').fullCalendar('removeEventSource', 'source102');
}
});
function renderViewColumns(view, element) {
element.find('.fc-day-header').each(function() {
var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
$(this).html(buildDateColumnHeader(theDate));
});
function buildDateColumnHeader(theDate) {
var container = document.createElement('div');
var DD = document.createElement('div');
var ddd = document.createElement('div');
DD.textContent = theDate.format('DD');
ddd.textContent = theDate.format('dddd').toUpperCase();
container.appendChild(DD);
container.appendChild(ddd);
DD.className = 'ds-header-day';
ddd.className = 'ds-header-month';
return container;
}
}
});
答案 0 :(得分：3)
我已经弄明白了！我想赞扬mikesmithdev获得一些见解，但我做了一些升级。我确信还有更好的方法，但目前这种方法很有效。
平滑呈现事件
用rerenderEVents替换refetchEvents。
每个类别都有自己的功能，以便在点击复选框时所有事件都不会闪烁。
事件来源是事件对象
我发现使用事件对象而不是指向JSON源的链接（甚至是本地托管）时，点击和关闭事件的加载时间是无缝的。
不再需要两个事件实例
由于我们不再加载事件，在点击时删除所有事件，并在点击时重新加载其他版本的事件，我们只需要1个版本的事件。
日历内的复选框过滤器
我需要复选框位于fc工具栏下面。我附加了这些，以便它们加载得很干净。
周视图的自定义列标题
我需要将它作为默认的basicWeek视图，因为每天会有很多事件。这一点都很明显。
这是更新的JSFiddle
这是我的jQuery代码：
jQuery(document).ready(function($) {
var eventSource = new Array();
eventSource[0] = [{"title":"Lets see if this works","start":"2017-09-14T13:00:00","end":"2017-09 14T14:00:00","allDay":true,"url":"","color":"#7dc5d7","catID":99,"cat":"all-events"},{"title":"Another Test Event","start":"2017-09-20T13:00:00","end":"2017-09-20T14:00:00","allDay":true,"url":"","color":"#7dc5d7","catID":99,"cat":"all-events"}];
eventSource[1] = [{"title":"Test","start":"2017-08-10T10:00:00","end":"2017-08-12T12:00:00","allDay":true,"url":"","color":"#f98b22","catID":100,"cat":"conferences"},{"title":"Conference Event","start":"2017-08-23T08:00:00","end":"2017-08-23T09:30:00","allDay":true,"url":"","color":"#f98b22","catID":100,"cat":"conferences"}];
eventSource[2] = [{"title":"Skeet Shooting & Cookout","start":"2017-09-30","end":"2017-09-30","allDay":true,"url":"","color":"#4776fd","catID":101,"cat":"men"},{"title":"Movie Night \u2013 \u201cGreater\u201d","start":"2017-09-01","end":"2017-09-01","allDay":true,"url":"","color":"#4776fd","catID":101,"cat":"men"}];
eventSource[3] = [{"title":"Some Women\u2019s Event","start":"2017-08-23T08:00:00","end":"2017-08-23T09:30:00","allDay":true,"url":"","color":"#b300ec","catID":102,"cat":"women"}];
eventSource[4] = [{"title":"A Youth Event","start":"2017-08-21T15:15:00","end":"2017-08-21T22:00:00","allDay":true,"url":"","color":"#36e4bc","catID":103,"cat":"youth"}];
$('#calendar').fullCalendar({
displayEventEnd: true,
timeFormat: 'h:mm A',
theme: true,
header: {
left: 'basicWeek,listSixMonths,today',
center: 'title',
right: 'prev,next'
},
defaultDate: '2017-08-23',
defaultView: 'basicWeek',
views: {
basicWeek: {
titleFormat: 'MMMM D, YYYY'
},
listWeek: {
titleFormat: 'MMMM D, YYYY'
},
listSixMonths: {
type: 'list',
duration: { months: 6 },
buttonText: '6 Month List',
titleFormat: 'MMMM D, YYYY'
},
},
viewRender: renderViewColumns,
eventRender: function (event, element) {
element.attr('href', 'javascript:void(0);');
},
eventSources: [eventSource[0],eventSource[1],eventSource[2],eventSource[3], eventSource[4]],
});
// Create Checkboxes
var checkboxContainer = `<ul class='ds-event-categories'>
<li id='cat99'><label><input id='all-events' type='checkbox' checked>All Events</label></li>
<li id='cat100'><label><input id='conferences' type='checkbox' checked>Conferences</label></li>
<li id='cat101'><label><input id='men' type='checkbox' checked>Men</label></li>
<li id='cat102'><label><input id='women' type='checkbox' checked>Women</label></li>
<li id='cat103'><label><input id='youth' type='checkbox' checked>Youth</label></li>
</ul>`;
// Append it to FullCalendar.
$(".fc-toolbar").after(checkboxContainer);
$("#all-events").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', eventSource[0]);
} else {
$('#calendar').fullCalendar('removeEventSource', eventSource[0]);
}
$('#calendar').fullCalendar('rerenderEvents');
});
$("#conferences").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', eventSource[1]);
} else {
$('#calendar').fullCalendar('removeEventSource', eventSource[1]);
}
$('#calendar').fullCalendar('rerenderEvents');
});
$("#men").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', eventSource[2]);
} else {
$('#calendar').fullCalendar('removeEventSource', eventSource[2]);
}
$('#calendar').fullCalendar('rerenderEvents');
});
$("#women").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', eventSource[3]);
} else {
$('#calendar').fullCalendar('removeEventSource', eventSource[3]);
}
$('#calendar').fullCalendar('rerenderEvents');
});
$("#youth").change(function() {
if (this.checked) {
$('#calendar').fullCalendar('addEventSource', eventSource[4]);
} else {
$('#calendar').fullCalendar('removeEventSource', eventSource[4]);
}
$('#calendar').fullCalendar('rerenderEvents');
});
function renderViewColumns(view, element) {
element.find('.fc-day-header').each(function() {
var theDate = moment($(this).data('date')); /* th.data-date="YYYY-MM-DD" */
$(this).html(buildDateColumnHeader(theDate));
});
function buildDateColumnHeader(theDate) {
var container = document.createElement('div');
var DD = document.createElement('div');
var ddd = document.createElement('div');
DD.textContent = theDate.format('DD');
ddd.textContent = theDate.format('dddd').toUpperCase();
container.appendChild(DD);
container.appendChild(ddd);
DD.className = 'ds-header-day';
ddd.className = 'ds-header-month';
return container;
}
}
});