我正在构建一个日历，它将显示三种类型的事件：假期，事件和会议。我希望能够使用一系列三个复选框来过滤事件，以显示和隐藏所选的事件类型。
我设法在页面加载时显示事件，并且能够使用复选框隐藏和显示所选事件。
我遇到的问题是更改已查看的月份。
单击前进和后月按钮时，日历将忽略过滤器并显示隐藏的事件类型。除此之外，日历将复制所有类型的事件。
有人可以查看代码并告诉我哪里出错了吗？
$(document).ready(function() {
var windows_size = $(window).width();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar('removeEvents');
var calendar = $('#calendar').fullCalendar({
events: '<?php echo base_url("calendar/get_events"); ?>',
editable: true, // Set the calendar to be editable, ie, moving the dates and adjusting length of events
windowResize: function(view) {
if ($(window).width() < 768){
$('#calendar').fullCalendar( 'changeView', 'basicDay' );
$('.fc-month-button').hide();
$('.fc-agendaWeek-button').hide();
$('.fc-agendaDay-button').hide();
} else {
$('#calendar').fullCalendar( 'changeView', 'month' );
$('.fc-month-button').show();
$('.fc-agendaWeek-button').show();
$('.fc-agendaDay-button').show();
}
},
timeFormat: "HH:mm", // Format the date that is displayed on the calendar to be 24 hour instead of 3am
header: {
left: 'prev,next today', // Buttons on the left of header of calendar
center: 'title', // Shows the date of the calendar page being viewed
right: 'month,agendaWeek,agendaDay' // Buttons on the right of the calendar
},
selectable: true,
selectHelper: true,
select: function(event, start, end, allDay)
{
var dt = new Date(); // Create a new date from the current one
var hour = dt.getHours(); // Get and store only the hour from the current time
var start_date = moment(start).format('DD-MM-YYYY'); // Format the start and end dates
var end_date = moment(start).format('DD-MM-YYYY');
var start_date_time = moment(start).format('DD-MM-YYYY '+hour+':00'); // Format the start and end dates as well as setting the start time to the current time and the end in an hours time
var end_date_time = moment(start).format('DD-MM-YYYY '+(hour+1)+':00');
$('#start').val(start_date); // Place the formatted dates and times into the form ready for the user
$('#end').val(end_date);
$('#start_date_time').val(start_date_time);
$('#end_date_time').val(end_date_time);
$('#add_event_modal').foundation('reveal', 'open'); // Display the form
},
editable: true,
eventDrop: function(event, delta) {
console.log(event, delta);
$.ajax({
url: '<?php echo base_url("calendar/update_event_drop"); ?>',
data: {id: event.id, milliseconds: delta._milliseconds, days: delta._days, months: delta._months } , // Supplies the controller with the breakdown of the time for which the event should be adjusted
type: "POST",
success: function(json)
{
alert("Updated Successfully");
}
});
},
eventResize: function(event) // Changes the length of the event. The user then uses the eventDrop (moves) event to change the starting time.
{
var start = moment(event.start).format('YYYY-MM-DD HH:mm');
var end = moment(event.end).format('YYYY-MM-DD HH:mm');
$.ajax({
url: '<?php echo base_url("calendar/resize_event"); ?>',
data: { id: event.id, start: start, end: end },
type: "POST",
success: function(json)
{
alert("Updated Successfully");
}
});
},
eventClick: function(event) // When an event is selected display all the information for that event with the option to update or delete.
{
console.log(event);
$.ajax({
url: "<?php echo base_url('calendar/get_event_info'); ?>",
type: "POST",
data: { id: event.id }
}).done(function(resp) {
$('#event_info_modal').foundation('reveal', 'open', '<?php echo base_url("calendar/show_event_info"); ?>');
//
}).fail(function(jqXHR, textStatus) {
alert("Request failed: " + textStatus + " - Please try again.")
})
}
});
function filter_this(filter)
{
var holidays = $('#holidays').is(':checked');
var events = $('#events').is(':checked');
var meetings = $('#meetings').is(':checked');
if(holidays == true)
{
var holidays_source = '<?php echo base_url("calendar/get_events"); ?>?holidays=' + holidays;
}
if(events == true)
{
var events_source = '<?php echo base_url("calendar/get_events"); ?>?&events='+ events;
}
if(meetings == true)
{
var meetings_source = '<?php echo base_url("calendar/get_events"); ?>?&meetings='+ meetings;
}
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', holidays_source);
$('#calendar').fullCalendar('addEventSource', events_source);
$('#calendar').fullCalendar('addEventSource', meetings_source);
}
<input class="switch-input" id="holidays" type="checkbox" name="holidays" onclick="filter_this('filter');" checked>
<input class="switch-input" id="events" type="checkbox" name="events" onclick="filter_this('filter');" checked>
<input class="switch-input" id="meetings" type="checkbox" name="meetings" onclick="filter_this('filter');" checked>
答案 0 :(得分：1)
您需要将filter_this更新为：
function filter_this() {
var holidays, events, meetings;
if ($('#holidays').is(':checked') == true) {
holidays = { url: '<?= base_url("calendar/get_events"); ?>?holidays=1'};
}
if ($('#events').is(':checked') == true) {
events = { url: '<?= base_url("calendar/get_events"); ?>?&events=1'};
}
if ($('#meetings').is(':checked') == true) {
meetings = {url: '<?= base_url("calendar/get_events"); ?>?&meetings=1'};
}
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('removeEventSources');
$('#calendar').fullCalendar('addEventSource', holidays);
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('addEventSource', meetings);
}
即使您更改了观看次数或正在查看的月份/周/日，此功能仍然有效。
那就是说，我认为通过添加三个不同的来源，你可能会在filter_this上过度复杂化。由于您的URL始终相同，因此您只需在请求中传递自定义参数即可。例如，您可以将日历实例化为：
$('#calendar').fullCalendar({
events: {
url: '<?= base_url("calendar/get_events"); ?>',
data: {
meetings: "true",
holidays: "true",
events: "true"
}
},
你的filter_this就像是：
function filter_this() {
var eventSource = {
url: '<?= base_url("calendar/get_events"); ?>',
data: {
holidays: $('#holidays').is(':checked'),
events: $('#events').is(':checked'),
meetings: $('#meetings').is(':checked')
}
};
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('removeEventSources');
$('#calendar').fullCalendar('addEventSource', eventSource);
}
在PHP方面，您可以执行类似
的操作if ($_GET['holidays'] == "true") {
// fetch holiday events
}
if ($_GET['meetings'] == "true") {
// fetch meeting events
}
注意：这是使用FullCalendar 3.0.1测试的