如何在jquery fullcalendar中通過ajax響應發送日曆事件

我正在使用帶有Codeigniter的jQuery Fullcalendar。首先，我有一張有時間表和名字的桌子。當我加載日曆頁面時，我正在向fullcalendar.js發送數據，但我想要在ajax響應中。我如何繼續？請幫幫我。如何在jquery fullcalendar中通過ajax響應發送日曆事件

我試過下面的代碼。

function get_locationdata(start, end) { 
    $.ajax({ 
     type: "POST", 
     url: '<?php echo base_url(); ?>/index.php/Task_controller/get_schedulelocationsdata',  
     data: { 
      start: start, 
      end: end, 
      user_id: user_id 
     }, 
     success: function(resp) { 
      defaultEvents = resp; 
     } 
    }); 
} 

defaultEvents = resp; 

<script src = '<?php echo base_url(); ?>assets/plugins/fullcalendar/dist/fullcalendar.min.js'></script> 
<script src = "<?php echo base_url(); ?>assets/pages/jquery.fullcalendar.js"></script>

defaultEvents是我發給jquery.fullcalendar.js 和RESP我得到json_encoded data.I想用Ajax響應事件發送到fullcalendar.js數組。

來源

2017-10-10 Anuradha

正常情況下，您可以直接通過提供URL（如果它符合fullCalendar指定的內容，則按照以下內容直接告訴fullCalendar事件數據的位置）：https：//fullcalendar.io/docs/event_data/events_json_feed/。，因爲你使用的是POST請求，所以它不符合要求，所以除非你可以改變它，否則你可以使用這個模式：https://fullcalendar.io/docs/event_data/events_function/。試試看。如果你被卡住了，post – ADyson

PS「jquery.fullcalendar.js」是jQuery的副本，還是fullCalendar的副本？如果是jquery，則應該添加_before_ fullCalendar（並且還需要其他依賴項，如momentJS，如https://fullcalendar.io/docs/usage/）。如果它是fullCalendar的另一個副本，那麼你應該刪除它，因爲你已經在它上面的行上加載了fullCalendar。 – ADyson

jquery.fullcalendar.js是fullcalendar的副本。 – Anuradha

獲取您的活動的最簡單方法是將您的饋送從POST饋送更改爲GET。然後，您需要做的就是將URL傳遞給Fullcalendar，並且一切正常。如果這是不可能的，你將不得不重新安排你的代碼。您的AJAX調用是異步的，這意味着它不會立即完成並獲得結果，並且您的代碼在它下面（例如第二行defaultEvents = resp;）將無法訪問從AJAX返回的任何結果 - resp在此時未定義。

因此，您需要在AJAX完成時在成功回調中初始化Fullcalendar。這假定你的AJAX POST返回一組事件correctly formatted and as expected by Fullcalendar（例如一個數組）。如果它們的格式不正確，則需要在AJAX success回調中處理它們。

function get_locationdata(start, end) { 
    $.ajax({ 
     type: "POST", 
     url: '<?php echo base_url(); ?>/index.php/Task_controller/get_schedulelocationsdata', 
     data: { 
      start: start, 
      end: end, 
      user_id: user_id 
     }, 
     success: function(resp) { 
      // Now you have your event data, you can fire up Fullcalendar 
      initFullcalendar(resp); 
     } 
    }); 
} 

function initFullcalendar(events) { 
    $('#calendar').fullCalendar({ 
     // ... 
     events: events, 
    }); 
} 

// Fire everything off 
get_locationdata('2017-10-10', '2017-11-10');

注意儘管通過向Fullcalendar提供一組靜態事件，這意味着它們在更改視圖時不會更新。因此，如果您單擊日曆導航按鈕以查看下個月，則事件將不會更新。除非您在初始get_locationdata()調用中加載了所有過去，現在和將來的事件，否則您將不會在新月份看到新事件。您需要提出一些涉及viewRender回調的解決方案，以便在更改視圖（例如，點擊一個新的月份）時，您可以觸發新的AJAX請求以獲取新事件。

來源

2017-10-10 13:23:16

我想上面的代碼。但在initFullCalendar函數中，我試圖初始化日曆。但事件不會發送到日曆頁面。這是主要問題。請幫忙。 – Anuradha

@Anuradha是否將您的AJAX調用（上面的代碼中的'resp'）的響應傳遞給'initFullcalendar（）'？這是有效的事件數據嗎？ –

是的，我通過ajax調用傳遞數據，並在resp數據將作爲json編碼數據來。 – Anuradha

如何在jquery fullcalendar中通過ajax響應發送日曆事件

回答

相關問題