在Fullcalendar中保持事件

Question

我的頁面上有一個fullcalendar的實例。每一次，我插入一個事件（通過引導模式），我也將數據與AJAX發送到一個PHP文件，它將內容輸入到數據庫。然後，每次我打電話給該頁面時，這些條目都將從數據庫中獲取並出現在日曆中。我想補充的事件用下面的代碼：

var myCalendar = $('#calendar'); 
var myEvent = { 
     title: '<?=$r['title'];?>', 
     allDay: true, 
     start: '<?=$r['startDate'];?>', 
     end: '<?=$r['endDate'];?>' 
}; 
myCalendar.fullCalendar('renderEvent', myEvent); 

這是代碼，在那裏我直接添加事件（進入的引導模式的信息後），而且代碼，在那裏我添加事件，讓後來自數據庫的信息。 這一切都很好，但：當我例如切換月份，事件不再出現，所以當調用頁面時，所有來自9月份的事件都在那裏，但是當從9月份切換到10月份時再次返回，所有事件都不再存在。爲什麼會發生這種情況，我該如何改變這種行爲？

以下是完整的代碼：

<script> 
     $(document).ready(function(){ 
      $('#calendar').fullCalendar({ 
       header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
       }, 
       dayClick: function(date, jsEvent, view) { 
        $('#add_date_modal').modal('show'); 
        $('#add_date_startdate').val(date.format()); 
        $('#add_date_startdate').datepicker({dateFormat: 'yy-mm-dd',firstDay: 1}); 
        $('#add_date_enddate').datepicker({dateFormat: 'yy-mm-dd',firstDay: 1}); 
       }, 
       editable:true, 
       selectable:true 
      }); 
     }); 

     function addTitle(){ 
      var title = $('#add_date_title').val(); 
      var startdate = $('#add_date_startdate').val(); 
      var enddate = $('#add_date_enddate').val(); 
      var end_split = enddate.split('-'); 
      end_split[2]= parseInt(end_split[2])+parseInt("1"); 
      enddate = end_split[0] + "-" + end_split[1] + "-" + end_split[2]; 
      $('#add_date_title').val(''); 
      $('#add_date_startdate').val(''); 
      $('#add_date_enddate').val(''); 
      $('#add_date_modal').modal('hide'); 

      var myCalendar = $('#calendar'); 
      var myEvent = { 
       title:title, 
       allDay: true, 
       start: startdate, 
       end: enddate 
      }; 
      myCalendar.fullCalendar('renderEvent', myEvent); 

      $.ajax({ 
       type: "POST", 
       url: "process_calendar_data.php", 
       data: { 
        title: title, 
        start: startdate, 
        end: enddate 
       } 
      }); 
     } 
    </script> 

    <?php 
    $dbh = new PDO(); //Database information 
    $sql = $dbh->prepare("SELECT * FROM calendarData WHERE UID=?"); 
    $sql->execute(array($_SESSION['user'])); 
    while($r=$sql->fetch()){ 
     ?> 
     <script> 
      $(document).ready(function() { 
       var myCalendar = $('#calendar'); 
       var myEvent = { 
        title: '<?=$r['title'];?>', 
        allDay: true, 
        start: '<?=$r['startDate'];?>', 
        end: '<?=$r['endDate'];?>' 
       }; 
       myCalendar.fullCalendar('renderEvent', myEvent); 
      }); 
     </script> 
    <?php 
    } 

    ?> 

process_calendar_data.php：

if(!empty($_POST)){ 
    $title = $_POST['title']; 
    $startdate = $_POST['start']; 
    $enddate = $_POST['end']; 
    $userID = $_SESSION['user']; 
    $dbh = new PDO(...); 
    $sql = $dbh->prepare("INSERT INTO calendarData VALUES (?,NULL,?,?,?)"); 
    $sql->execute(array($userID,$title,$startdate,$enddate)); 
} 

Answer 1

您的變量mycalendar未持有合適的對象，這就是爲什麼refetchEvents不起作用。您需要設置它，當你初始化像這樣

var mycalendar = $('#calendar').fullcalendar(); 

然後，你可以參考它正確

而且，你沒有一個events選項，以使您的活動。做到這一點的最佳方式是讓PHP腳本獲取所有事件，然後將其轉換爲JSON。一旦你這樣做，你將結果設置爲事件選項。看到這一點： http://fullcalendar.io/docs/event_data/events_json_feed/ 這樣，當你調用fetchEvents，他們將再次獲取所有保存的事件 或你的情況，當你點擊下個月，它會自動重新獲取