完整日历 - refetchResources

Question

我对如何通过 url（json 提要）重新获取资源感到困惑。

这呈现了我的日历资源 -

   $('#calendar').fullCalendar({
     ...
     resources: 'example.json?id=1',
     ...
   });

此文档 (https://fullcalendar.io/docs/refetchResources) 表示 "If the resources option was specified as a JSON feed it will be requested again."

所以我有一个按钮，我想单击它来更改资源 url 并重新加载资源提要 -

 $('.resource-button').on('click', function() {
    link = $(this).attr('href');
    $('#calendar').fullCalendar('refetchResources', {
      resources: link
    });
 });

知道为什么它不重新加载新资源 link 吗？资源列表像正在做某事一样刷新，但数据保持不变。

谢谢

Answer 1

这个代码

$('#calendar').fullCalendar('refetchResources', {
      resources: link
 });

没有意义。根据您链接到的文档， "refetchResources" 方法不接受任何额外参数。您提供给它的 { resources: link } 对象不是预期的，因此会被 fullCalendar 忽略。我不确定是什么让您想到可以向此函数传递更多参数。

您引用的短语：

"If the resources option was specified as a JSON feed it will be requested again."

表示它将 re-fetch 现有资源数据来自现有指定来源（因此 "again" ).我想你误解了这个解释。

换句话说，它所做的只是刷新 already-specified 来源。如果您希望动态地更改资源列表，那么您需要先使用单独的方法来设置资源选项。

下面是一个示例，它在单击按钮时将资源从一个 URL 切换到另一个。您当然可以根据需要进行调整，但需要注意的关键是在调用 "refetchResources".

之前使用单独的 "option" 方法更改资源 URL

HTML:

<button type="button" id="changeResources">
Click to Change Resources
</button>

<div id='calendar'></div>

JavaScript:

var resources = [
 "https://api.myjson.com/bins/m7blz",
 "https://api.myjson.com/bins/cqj3b"
]
var currentResourceIndex = 0;

$(document).ready(function() {

    $('#calendar').fullCalendar({
    resources: resources[currentResourceIndex],
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
    defaultView: 'timelineDay',
    header : {
        left: 'prev, today',
        center: 'title',
        right: 'next'
    },
    });

    $("#changeResources").click(function() {
      if (currentResourceIndex == 0) currentResourceIndex = 1;
      else currentResourceIndex = 0;
      $('#calendar').fullCalendar('option', 'resources', resources[currentResourceIndex]);
      $("#calendar").fullCalendar("refetchResources");
    });
});

有关使用按钮切换资源的工作演示（按照上面的代码），请参阅 http://jsfiddle.net/toytd26b/57/。

有关如何在初始化日历后设置日历选项的文档，请参阅 https://fullcalendar.io/docs/dynamic-options。

Answer 2

 $('.resource-button').on('click', function() {
    link = $(this).attr('href');
    $('#calendar').fullCalendar('option', 'resources', link);
    $('#calendar').fullCalendar('refetchResources');
 });

完整日历 - refetchResources

Full Calendar - refetchResources

fullcalendar

fullcalendar-scheduler