更新全日历事件中传递的变量

Question

我有一个完整的日历，我可以在其中根据 select 输入（多个）过滤事件结果：

<select id="ids" name="ids[]" class="form-control" multiple>
    <option value="1" selected> Option 1</option>
    <option value="2"> Option 2</option>
    <option value="3"> Option 3</option>
</select>

<button type="button" id="btn-filter">Apply</button>

默认视图是选项 1 selected。加载页面时，fullcalendar 可以正确检索我的 selection.

如果我 select 其他选项（例如选项 2）并单击按钮过滤器，fullcalendar 刷新但仍然只传递选项 1（我在调试控制台 Firefox 中看到它）：

FIREFOX 控制台：

array_ids[]:    1
start:  2019-06-01T00:00:00
end:    2019-07-01T00:00:00

这是fullcalendar的一段代码

events: {
            url: './get-events.php',
            cache: false,
            type: 'POST',
            data: {
                array_ids: $("#ids").val()
            },
            error: function () {
                alert('there was an error while fetching events!');
            },
        },

这是刷新日历的按钮：

  $('#btn-filter').on('click', function(e) {

        e.preventDefault();

        $('#calendar').fullCalendar('refetchEvents');

    });

fullcalendar 似乎只存储页面加载时的第一个值：array_ids: $("#ids").val()

编辑：好的，我已经这样修改了：

   events: function (start, end, timezone, callback) {

           $.ajax({
             url: './get-events.php',
             data: { "array_ids": $("#ids").val(), "start": moment(start).format(), "end": moment(end).format() },
             cache: false,
             type: 'POST',
             success: function (data) {
                $('#calendar').fullCalendar('rerenderEvents');
             }
           });

        },

现在所有 select 选项都已通过...但是...日历停止呈现结果...仍然为空...但是看着控制台 firefox 我看到数据已正确收集.. ..only 不显示在全日历上！

Answer 1

这是因为您将静态数据传递给 fullCalendar。当你写

data: {
  array_ids: $("#ids").val()
},

您在 $("#ids").val() 那个时刻 给 fullCalendar 的值 - 即在您创建日历的那一刻。您只需传递一次值。 fullCalendar 接收并存储该值，并 re-uses 每当它与您的服务器联系时。它不知道这个值是从哪里来的，也没有办法更新它。这就是 JavaScript 的工作方式（实际上是其他大多数编程语言）——变量通常按值传递，而不是按引用传递（无论如何你在这里没有引用，因为你只是传递了输出一个函数的直接）。

根据 documentation（在标题为 "Dynamic data parameter" 的部分），如果您希望 fullCalendar 在每次联系时检查新数据值服务器，你需要给它一个方法来做到这一点。你这样做的方式是这样的：

不是为您的数据传递一个简单的值，而是给 fullCalendar 一个回调函数。这意味着 fullCalendar 每次都可以运行该函数，并且它将 return 基于当前数据的新值。

data: function() { // a function that returns an object
  return {
    array_ids: $("#ids").val()
  };
}

更新全日历事件中传递的变量

Update passed variables in fullcalendar events

javascript

jquery

callback

fullcalendar

fullcalendar-3