Full Calendar：如何修改URL并通过JSON Feed重新获取资源

没问题，我来帮你搞定这个需求！其实核心就是更新日历的资源Feed URL，然后触发重新获取资源的方法，具体步骤如下：

1. 给按钮添加新URL的存储属性
   建议给你的按钮用data-*属性来存储对应的资源URL，这样更语义化也更易维护，比如：

   <button class="resource-button" data-resource-url="example.json?id=2">切换到资源2</button>
   <button class="resource-button" data-resource-url="example.json?id=3">切换到资源3</button>
   

2. 修改按钮点击事件代码
   在点击事件里，我们需要完成三个动作：获取新URL、更新日历的资源配置、触发重新获取资源。代码如下：

   $('.resource-button').on('click', function() {
     // 从按钮的data属性里拿到新的资源URL
     const newResourceUrl = $(this).data('resource-url');
     
     // 获取FullCalendar的实例
     const calendar = $('#calendar').fullCalendar('getCalendar');
     
     // 更新日历的resources配置为新的URL
     calendar.options.resources = newResourceUrl;
     
     // 调用官方文档里的refetchResources方法，重新请求新的资源Feed
     calendar.refetchResources();
   });
   

原理说明 #

根据你提到的FullCalendar官方说明，当resources选项是JSON Feed时，refetchResources()会重新请求该资源。我们这里先更新了resources对应的URL，再调用这个方法，日历就会自动用新的URL去拉取资源数据并更新视图了。

如果你用的是FullCalendar v4及以上的版本（API有所调整），代码会稍有不同，比如获取实例用$('#calendar').get(0).getApi()，不过从你当前的初始化代码来看，应该是v3或更早版本，上面的代码完全适用。

内容的提问来源于stack exchange，提问作者scottkekoa