通过FullCalendar搜索

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上调用“refetchEvents”（https://fullcalendar.io/docs/event_data/refetchEvents/）。这将更新您的事件列表，并通过特定的人/房间/事件ID以及标准参数（即那些是可见视图的当前开始/结束日期）来限制它。