通過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以及標準參數（即那些是可見視圖的當前開始/結束日期）來限制它。