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

Question

我正在使用带有 Codeigniter 的 jQuery Fullcalendar。首先，我有一张带有日程安排时间和名称的表格。当我加载日历页面时，我正在向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

获取事件的最简单方法是将提要从 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 请求以获取新事件。