Full Calendar - refetchResources

Question

I am confused on how to refetch the resources by url (json feed).

This renders my calendar resources -

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

This documentation (https://fullcalendar.io/docs/refetchResources) says "If the resources option was specified as a JSON feed it will be requested again."

So I have a button that I want to click to change the resource url and reload the resource feed -

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

Any idea why it doesn't reload the new resource link? The list of resources refreshes like it is doing something but the data stays the same.

Thanks

score 2 · Accepted Answer · answered Mar 26 '18 at 09:24

This code

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

makes no sense. As per the documentation you linked to, the "refetchResources" method does not accept any extra arguments. The { resources: link } object you supply to it is not expected, and is consequently ignored by fullCalendar. I'm not sure what gave you the idea that you could pass more arguments to this function.

The phrase you quoted:

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

means it will re-fetch existing resource data from the existing specified sources (hence the word "again"). I think you have misunderstood this explanation.

In other words all it does is refresh the already-specified sources. If you wish to change the list of resource dynamically, then you need to set the resources option first using the separate method to set options.

Here's an example which switches the resources from one URL to another when a button is clicked. You can of course adjust this to your needs, but the key thing to note is the use of the separate "option" method to change the Resource URL before calling "refetchResources".

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

See http://jsfiddle.net/toytd26b/57/ for a working demonstration of switching the resources using a button (as per the code above).

See https://fullcalendar.io/docs/dynamic-options for documentation of how to set calendar options after the calendar has been initialised.

It was a bit easier then your solution, but you got me what I needed with the 'option' — scottkekoa, Mar 29 '18 at 16:16
No worries, it was only a demonstration of the principle. Your answer using the properties of a button / link to store the resource URL is a neat one. — ADyson, Mar 30 '18 at 05:15
Thanks. I am using it to filter the JSON resource feed which is very useful. — scottkekoa, Apr 01 '18 at 00:11
Ex. '/resources.json?ID=2'. Each button is populated from the database with an ID and that resource will need that attribute to be shown. — scottkekoa, Apr 01 '18 at 00:17

score 1 · Answer 2 · answered Mar 29 '18 at 16:18

1

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

answered Mar 29 '18 at 16:18

scottkekoa

134
2
10

Full Calendar - refetchResources

2 Answers2