Question

我有一个日历，可以根据选择的输入（多个）过滤事件结果：

<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。加载页面时，fullcalendar可以正确检索我的选择。

如果我选择其他选项（例如，OPTION 2）并单击按钮过滤器，则全日历刷新，但仍仅传递OPTION 1（我在调试控制台Firefox中看到了它）：

FIREFOX控制台：

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

这是完整日历的代码段

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');
             }
           });

        },

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

Answer 1

这样做的原因是您要将静态数据传递给fullCalendar。当你写

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

您将$("#ids").val()的值{em}赋予fullCalendar -即您创建日历的那一刻。您只需将值传递一次。 fullCalendar会接收并存储该值，并在与服务器联系时重新使用它。它不知道该值来自何处，也无法更新它。这就是JavaScript工作的方式（实际上是其他大多数编程语言）-变量通常是通过值而不是通过引用传递的（无论如何，这里没有引用，因为您只是直接传递了函数的输出）。

根据documentation（在标题为“动态数据参数” 的部分中），如果希望fullCalendar在每次与服务器联系时检查新的数据值，则需要给它一种方法这样做的方式是：

代替传递简单的数据值，给fullCalendar一个回调函数。这意味着fullCalendar可以每次运行该函数，并且它将基于当前数据返回一个新值。

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

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

1 个答案: