我有一个日历,可以从MySQL数据库获取现场工作许可证的事件。当页面打开时,将从数据库中获取事件并将其添加到日历中。
我想在日历中添加一个搜索工具,用户在其中将文本输入到 5 个输入中的任何一个,单击应用,日历就会根据输入的条件获取事件。
页面打开时第一次获取事件时使用通配符通过 ajax 查询数据库,这没有问题。然后,我调用 FullCalendar removeEvents 和 refetchEvents 方法来使用新值运行 ajax,但不包括任何输入的文本,仅使用原始值。
我的Javascript在下面
$(document).ready(function(){
document.getElementById('left_nav').innerHTML = sessionStorage.getItem('left_nav');
document.getElementById('company').innerHTML = " " + sessionStorage.getItem('company');
document.getElementById('profile_image').innerHTML = sessionStorage.getItem('profile_image');
//Add value of inputs to variables
var select_project = $('#select_project').val();
var select_site = $('#select_site').val();
var select_area = $('#select_area').val();
var select_requester = $('#select_requester').val();
var select_line_manager = $('#select_line_manager').val();
var today = new Date();
var dd = today.getDate();
var m = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
today = yyyy+'/'+m+'/'+dd;
var popup_button;
$('#clear').click(function(e) {
})
$('#apply').click(function(e) {
//Clear all events and refetch
$('.fullcalendar-event').fullCalendar('removeEvents');
$('.fullcalendar-event').fullCalendar('refetchEvents');
})
// Event colors
$('.fullcalendar-event').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek,agendaDay'
},
views: {
week: {
columnFormat: 'ddd D/M'
},
day: {
columnFormat: 'dddd D/M'
}
},
defaultDate: today,
editable: false,
eventOverlap: false,
displayEventTime: false,
height: 'auto',
allDaySlot: false,
defaultView: 'agendaWeek',
events: {
//Get events based on criteria with wildcards
type: "POST",
url: 'php_files/calender_php_files/populate_calender.php',
data: {
client_id: sessionStorage.getItem('client_id'),
access_id: sessionStorage.getItem('access_id'),
select_project: '%' + select_project + '%',
select_site: '%' + select_site + '%',
select_area: '%' + select_area + '%',
select_requester: '%' + select_requester + '%',
select_line_manager: '%' + select_line_manager + '%'
}
},
eventRender: function (event, element) {
var event_popover = element.popover({
title: function () {
return "<B>" + event.event_title + "</B>";
},
placement: 'auto',
html: true,
trigger: 'click',
animation: 'true',
content: function () {
if (sessionStorage.getItem('access_id') > 1) {
if (event.event_status === 'Open') {
popup_button = "<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>View/Edit</a></button>" +
"<button style='margin-left: 8px;' class='btn btn-success btn-xs'><a style='color:white;' href='sign_on_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>Sign On</button>" +
"<button style='margin-left: 8px;' class='btn btn-warning btn-xs'><a style='color:white;' href='clear_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>Clear</button>" +
"</div>"
} else if (event.event_status === 'Cleared') {
popup_button = "<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>View</a></button>" +
"<button style='margin-left: 8px;' class='btn btn-danger btn-xs'><a style='color:white;' href='cancel_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>Cancel</button>" +
"</div>"
} else if (event.event_status === 'Cancelled') {
popup_button = "<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>View</a></button>" +
"</div>"
}
} else {
popup_button = "<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='view_permit.php?permit_id="
+ encodeURIComponent(event.event_number) + "'>View</a></button>" +
"</div>"
}
if (event.event_type === 'embargo') {
if (sessionStorage.getItem('access_id') > 1) {
return "<div>" +
"<b>Site: </b>" + event.event_site +
"<br />" +
"<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
moment(event.event_start_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
moment(event.event_end_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<br />" +
"<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='edit_site_embargo.php?embargo_id="
+ encodeURIComponent(event.event_number) + "'>View/Edit</a></button>" +
"</div>" +
"</div>"
} else {
return "<div>" +
"<b>Site: </b>" + event.event_site +
"<br />" +
"<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
moment(event.event_start_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
moment(event.event_end_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<br />" +
"<div class='form-group text-center'>" +
"<button class='btn btn-primary btn-xs'><a style='color:white;' href='edit_site_embargo.php?embargo_id="
+ encodeURIComponent(event.event_number) + "'>View</a></button>" +
"</div>" +
"</div>"
}
} else if (event.event_type === 'permit') {
return "<div>" +
"<b>Site: </b>" + event.event_site +
"<br />" +
"<b>Start: </b>" + moment(event.event_start_date).format('DD/MM/YYYY') + ", " +
moment(event.event_start_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<b>End: </b>" + moment(event.event_end_date).format('DD/MM/YYYY') + ", " +
moment(event.event_end_time, 'HHmmss').format('HH:mm') +
"<br />" +
"<br />" +
popup_button +
"</div>"
}
},
container: 'body'
}).popover('show');
$('body').on('click', function (e) {
if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
element.popover('hide');
});
}
});
});
您遇到的问题是,作为事件的一部分传递到 fullCalendar 中的data
对象是静态的。创建日历时,您将为 fullCalendar 提供处于该对象当时的状态。fullCalendar会复制它,并在获取事件时使用它。它无法读取您对该对象或其中的变量所做的任何更改。
解决方案是将data
定义为回调函数,每当需要刷新事件时,fullCalendar 都可以重新运行该函数。这样,它就有一些代码可以实际执行,以便读取变量的最新值,而不仅仅是静态对象。
你这样写:
events: {
//Get events based on criteria with wildcards
type: "POST",
url: 'php_files/calender_php_files/populate_calender.php',
data: function() {
return {
client_id: sessionStorage.getItem('client_id'),
access_id: sessionStorage.getItem('access_id'),
select_project: '%' + select_project + '%',
select_site: '%' + select_site + '%',
select_area: '%' + select_area + '%',
select_requester: '%' + select_requester + '%',
select_line_manager: '%' + select_line_manager + '%'
};
}
},
此处记录了这一点:https://fullcalendar.io/docs/event_data/events_json_feed/在标题为"动态数据参数"的最后一节中。
附言在调用refetchEvents
之前应该不需要使用removeEvents
- 重新获取操作已经自动清除日历并将其替换为最新数据。