如何在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响应发送日历事件

回答

相关问题