javascript - 如何在jquery fullcalendar中通过ajax响应发送日历事件

Question

我正在使用 jQuery Fullcalendar 和 Codeigniter。首先，我有一张带有时间表时间和姓名的表格。当我加载日历页面时，我将数据发送到 fullcalendar.js ，但我想要 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 的数组我正在获取 json_encoded 数据。我想使用 ajax 响应将事件发送到 fullcalendar.js 。

Answer 1

获取事件的最简单方法是将您的 Feed 从 POST Feed 更改为 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 提供一组静态事件，这意味着它们不会在您更改 View 时更新。因此，如果您单击日历导航按钮查看下个月，事件将不会更新。除非您在初始 get_locationdata() 调用中加载了所有过去、现在和 future 的事件，否则您将不会看到新月份的新事件。您需要提出一些涉及 viewRender 回调的解决方案，以便当 View 更改时(例如单击新的月份)，您可以触发新的 AJAX 请求来获取新事件.