通过添加和删除多个事件源来过滤事件 [英] Filter events by adding and removing multiple event sources
问题描述
我正在构建一个日历，它将显示三种类型的事件：假期，事件和会议。我希望能够使用一系列三个复选框来过滤事件，以显示和隐藏所选的事件类型。
I am building a calendar that will display three types of events: holidays, events and meeting. I would like to be able to filter the events using a series of three checkboxes to show and hide the selected event type.
我已设法获取要显示的事件页面加载并能够使用复选框隐藏和显示所选事件。
I have managed to get the events to display when the page loads and am able to hide and show the selected event using the checkboxes.
我遇到的问题是更改已查看的月份。
The issue I am having is when it comes to changing the viewed month.
当点击前进和后月按钮时，日历将忽略过滤器并显示隐藏的事件类型。除此之外，日历将复制所有类型的事件。
When either the forward and back month buttons are clicked the calendar will ignore the filters and display the hidden event type. On top of this the calendar will duplicate the events for all types.
有人可以查看代码并告诉我哪里出错了吗？
Could someone please have a look through the code and tell me where I am going wrong?
$(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>
推荐答案
您需要更新 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);
}
即使您更改了视图或月/周/日也能正常工作正在查看。
And this works even if you change the views or the month / week / day being viewed.
这就是说，我认为你可能会在 filter_this 上添加三个不同的来源。由于您的URL始终相同，因此您只需在请求中传递自定义参数即可。例如，您可以将日历实例化为：
That said, I think you might be overcomplicating things on filter_this by adding three different sources. Since your URL is always the same, you could just pass custom parameters on the request. For instance, you could instanciate the calendar as such:
$('#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方面，你可以做一些像
And on the PHP side, you could just do something like
if ($_GET['holidays'] == "true") {
// fetch holiday events
}
if ($_GET['meetings'] == "true") {
// fetch meeting events
}
注意：这是使用FullCalendar 3.0.1测试的
Note: This was tested with FullCalendar 3.0.1
这篇关于通过添加和删除多个事件源来过滤事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
