JQuery Fullcalendar 根据选择下拉列表过滤事件

问题描述

所以，目前我正在 PHP 上创建一个 fullcalendar，它根据我的数据库中的日期显示事件，我的数据库是使用 ODBC 的 Microsoft Access，在添加 eventRender 函数之前，我的 fullcalendar 与模式弹出功能一起工作正常。

但是，在我从 stackoverflow 的示例中添加了这几行代码之后，我的 fullcalendar 没有显示。我想知道代码是否与我之前写的兼容。

这是我的日历代码

<script>
      jQuery(document).ready(function($) { 
         
        $('#calendar').fullCalendar({
      {  
        title: '<?PHP echo $id?>',start: '<?PHP echo $newEnd?>',end: '<?PHP echo $newEnd?>',calibrator: '<?PHP echo $calibrator?>',description : '<?PHP echo $description?>',extendedProps : {
          ownerid : '<?PHP echo $ownerID?>',ownername : '<?PHP echo $ownerName?>',department : '<?PHP echo $depart?>',prevdate : '<?PHP echo $prevDate?>',duedate : '<?PHP echo $dueDate?>'
        },color : '<?PHP echo $color?>'
      },<?PHP } ?>
      ],eventRender: function eventRender( event,element,view ) {
        return ['both',event.calibrator].indexOf($('#calibrator').val()) >= 0
      }

      $('#calibrator').on('change',function(){
        $('#calendar').fullCalendar('rerenderEvents');
      });

      eventClick: function(event) {
      $("#successModal").modal("show");
      $("#successModal .modal-body #para").text(event.title);
      $("#successModal .modal-body #para1").text(event.extendedProps.ownerid);
      $("#successModal .modal-body #para2").text(event.extendedProps.ownername);
      $("#successModal .modal-body #para3").text(event.extendedProps.department);
      $("#successModal .modal-body #para4").text(event.description);
      $("#successModal .modal-body #para5").text(event.extendedProps.prevdate);
      $("#successModal .modal-body #para6").text(event.extendedProps.duedate);
      }

    });
  });
      </script>

事件渲染部分代码

 eventRender: function eventRender( event,function(){
        $('#calendar').fullCalendar('rerenderEvents');
      });

经过一些建议，我的事件显示为外部和内部选项，但当我选择这两个选项时不显示

<script>
      jQuery(document).ready(function($){ 
         
        $('#calendar').fullCalendar({
                      
      header: {
      left:   'prevYear,nextYear',center: 'title',right:  'prev,next today'
      },defaultview: 'month',showNonCurrentDates:false,fixedWeekCount:false,contentHeight:"auto",handleWindowResize:true,events: [
        <?PHP 
            include 'connect.PHP';

      function getColor($date) {
        $currentDate = date('Y-m-d');
        $oneweekDate = date('Y-m-d',strtotime('+1 week'));
        $eventColor = '';

        if($date < $currentDate){
            $eventColor = '#FF0000';
        } else if($date >= $currentDate && $date < $oneweekDate){
            $eventColor = '#FFA500';
        } else{
            $eventColor = '#008000';
        }
        return $eventColor;
    }

            $sql="SELECT * FROM masterlist1 WHERE Tool_Status = 'Active'";
            $result=odbc_exec($conn,$sql);
            while($row=odbc_fetch_array($result)){
        $newEnd = date("Y-m-d",strtotime($row['Calibration_Due_Date']));
        $color = getColor($newEnd);
        $id = $row['Form_Tracking_ID'];
        $ownerID = $row['Owner_I_Employee_ID'];
        $ownerName = $row['Owner_I_Name'];
        $calibrator = $row['Calibrator'];
                $description = $row['Description1'];
        $prevDate = date("F j,Y",strtotime($row['Date2']));
        $dueDate = date("F j,strtotime($row['Calibration_Due_Date']));
        $depart = $row['Department1'];
        ?>
      {  
        title: '<?PHP echo $id?>',event.calibrator].indexOf($('#calibrator').val()) >= 0
      },eventClick: function(event) {
      $("#successModal").modal("show");
      $("#successModal .modal-body #para").text(event.title);
      $("#successModal .modal-body #para1").text(event.extendedProps.ownerid);
      $("#successModal .modal-body #para2").text(event.extendedProps.ownername);
      $("#successModal .modal-body #para3").text(event.extendedProps.department);
      $("#successModal .modal-body #para4").text(event.description);
      $("#successModal .modal-body #para5").text(event.extendedProps.prevdate);
      $("#successModal .modal-body #para6").text(event.extendedProps.duedate);
      }

    });

    $('#calibrator').on('change',function(){
        $('#calendar').fullCalendar('rerenderEvents');
      });
  });
      </script>

这是我的选择器代码

 <select name="calibrator" id="calibrator">
    <option value="Both">Both</option>
    <option value="Internal">Internal</option>
    <option value="External">External</option>
    </select>

解决方法

在 Adyson 的帮助下，我能够查明错误并使代码正常工作。

在此之前的问题是我应该将 rerenderevents 部分放在 fullcalendar JS 代码之外，而我在调用 eventRender 函数后忘记了一个 ','。

下面是我选择器部分的代码

<select name="calibrator" id="calibrator">
    <option value="Both">Both</option>
    <option value="Internal">Internal</option>
    <option value="External">External</option>
</select>

我的全日历代码

<script>
      jQuery(document).ready(function($){ 
         
        $('#calendar').fullCalendar({
                      
      header: {
      left:   'prevYear,nextYear',center: 'title',right:  'prev,next today'
      },defaultView: 'month',showNonCurrentDates:false,fixedWeekCount:false,contentHeight:"auto",handleWindowResize:true,events: [
        <?php 
            include 'connect.php';

      function getColor($date) {
        $currentDate = date('Y-m-d');
        $oneweekDate = date('Y-m-d',strtotime('+1 week'));
        $eventColor = '';

        if($date < $currentDate){
            $eventColor = '#FF0000';
        } else if($date >= $currentDate && $date < $oneweekDate){
            $eventColor = '#FFA500';
        } else{
            $eventColor = '#008000';
        }
        return $eventColor;
    }

            $sql="SELECT * FROM masterlist1 WHERE Tool_Status = 'Active'";
            $result=odbc_exec($conn,$sql);
            while($row=odbc_fetch_array($result)){
        $newEnd = date("Y-m-d",strtotime($row['Calibration_Due_Date']));
        $color = getColor($newEnd);
        $id = $row['Form_Tracking_ID'];
        $ownerID = $row['Owner_I_Employee_ID'];
        $ownerName = $row['Owner_I_Name'];
        $calibrator = $row['Calibrator'];
                $description = $row['Description1'];
        $prevDate = date("F j,Y",strtotime($row['Date2']));
        $dueDate = date("F j,strtotime($row['Calibration_Due_Date']));
        $depart = $row['Department1'];
        ?>
      {  
        title: '<?php echo $id?>',start: '<?php echo $newEnd?>',end: '<?php echo $newEnd?>',calibrator: '<?php echo $calibrator?>',description : '<?php echo $description?>',extendedProps : {
          ownerid : '<?php echo $ownerID?>',ownername : '<?php echo $ownerName?>',department : '<?php echo $depart?>',prevdate : '<?php echo $prevDate?>',duedate : '<?php echo $dueDate?>'
        },color : '<?php echo $color?>'
      },<?php } ?>
      ],eventRender: function eventRender( event,element,view ) {
        return ['Both',event.calibrator].indexOf($('#calibrator').val()) >= 0
      },eventClick: function(event) {
      $("#successModal").modal("show");
      $("#successModal .modal-body #para").text(event.title);
      $("#successModal .modal-body #para1").text(event.extendedProps.ownerid);
      $("#successModal .modal-body #para2").text(event.extendedProps.ownername);
      $("#successModal .modal-body #para3").text(event.extendedProps.department);
      $("#successModal .modal-body #para4").text(event.description);
      $("#successModal .modal-body #para5").text(event.extendedProps.prevdate);
      $("#successModal .modal-body #para6").text(event.extendedProps.duedate);
      }

    });

    $('#calibrator').on('change',function(){
        $('#calendar').fullCalendar('rerenderEvents');
      });
  });
</script>

对于我的完整日历代码，它带有一个模式弹出窗口，使用从数据库中获取的数据显示事件的详细信息。