通过完整日历搜索

Question

我正在用FullCalendar，php和mysql构建一个大学时间表。 当您单击日历字段时，将创建事件;您可以为事件指定名称、教授和房间。该事件保存在 sql 数据库中。 我想添加一个搜索栏，可以搜索时间表;用户可以搜索教授、房间号、活动名称。时间表将随着用户键入而更新，并且它将使用该房间号/活动名称/教授姓名重新获取事件。

有人知道如何做到这一点吗？

这是我用于从 mysql 渲染事件的代码：

$sql = "SELECT id, title, naem, mentor, start, end, color FROM events ";
$req = $bdd->prepare($sql);
$req->execute();
$events = $req->fetchAll();
...  
...
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height:595,
defaultView: 'agendaWeek',
minTime: "07:00:00",
maxTime: "16:00:00",
editable: true,
eventLimit: true, 
selectable: true,
selectHelper: true,
firstDay:"1",
select: function(start, end) {
$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
$('#ModalAdd').modal('show');
},
eventRender: function(event, element) {
element.bind('dblclick', function() {
$('#ModalEdit #id').val(event.id);
$('#ModalEdit #title').val(event.title);
$('#ModalEdit #naem').val(event.naem);
$('#ModalEdit #mentor').val(event.mentor);
$('#ModalEdit #color').val(event.color);
$('#ModalEdit').modal('show');
});
element.find('.fc-title').append("<br/>" + event.naem + "<br/>" + event.mentor); 
},
eventDrop: function(event, delta, revertFunc) { 
edit(event);
},
eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
edit(event);
},
events: [
<?php foreach($events as $event): 
$start = explode(" ", $event['start']);
$end = explode(" ", $event['end']);
if($start[1] == '00:00:00'){
$start = $start[0];
}else{
$start = $event['start'];
}
if($end[1] == '00:00:00'){
$end = $end[0];
}else{
$end = $event['end'];
}
?>
{
id: '<?php echo $event['id']; ?>',
title: '<?php echo $event['title']; ?>',
naem: '<?php echo $event['naem']; ?>',
mentor: '<?php echo $event['mentor']; ?>',
start: '<?php echo $start; ?>',
end: '<?php echo $end; ?>',
color: '<?php echo $event['color']; ?>',
},
<?php endforeach; ?>
]
});
function edit(event){
start = event.start.format('YYYY-MM-DD HH:mm:ss');
if(event.end){
end = event.end.format('YYYY-MM-DD HH:mm:ss');
}else{
end = start;
}
id =  event.id;
Event = [];
Event[0] = id;
Event[1] = start;
Event[2] = end;
$.ajax({
url: 'editEventDate.php',
type: "POST",
data: {Event:Event},
success: function(rep) {
if(rep == 'OK'){
alert('Spremljeno!');
}else{
alert('Nešto zajebaje...'); 
}
}
});
}
});
</script>

Answer 1

像这样的自动完成插件将有助于 UI 部分：https://jqueryui.com/autocomplete/

使用它，您的用户可以找到所涉及的人员/房间/事件名称的ID，并从可能性列表中选择一个。您将需要一个 ajax 调用和一个关联的服务器端点，它将根据用户在框中键入的内容搜索数据库并返回任何匹配的结果。

然后在 fullCalendar 中，对事件源 https://fullcalendar.io/docs/event_data/events_function/使用此格式，以便在获取事件时可以将所选 ID 作为额外参数从自动完成传递到服务器。

接下来，收听自动完成的"选择"事件 (http://api.jqueryui.com/autocomplete/#event-select(，选择值后，在 fullCalendar 上调用"重新获取事件"(https://fullcalendar.io/docs/event_data/refetchEvents/(。这将更新您的事件列表，通过特定的人员/房间/事件 ID 以及标准参数(即可见视图的当前开始/结束日期(对其进行限制。