Problem with methods when loading resources as a JSON feed

Viewed 90

I'm having problems using methods such as getResources and addResource when loading resources from a remote script containing a JSON feed.

If the same resources are included as an array it works fine. Working example:

resources: [{"id":"a","title":"Auditorium A"},{"id":"b","title":"Auditorium B","eventColor":"green"}....

https://codepen.io/ProbablyTheRealJonas/pen/yLVzEJw

Not working:

resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',

https://codepen.io/ProbablyTheRealJonas/pen/BaQwVjY

What might I be missing?

1 Answers

I think this has to do with the fact you're trying to add the resource immediately after calling calendar.render() - which isn't really a realistic scenario I don't think - but forgetting that loading resources from a remote URL is asynchronous.

Therefore it is very likely that it loads the resources from the server after you've called addResource and getResources, which is why you don't see anything. (I assume that's what you mean by "not working" and "having problems" - you were very vague about the actual issue.)

If you make an "add resource" button and move the code for addResources and getResources into that, then they work just fine once the button is clicked - because by then the other resources have had chance to load from the server.

e.g.

<button type="button" id="addR">Add Resource</button>

and

  document.getElementById("addR").addEventListener("click", function () {
    calendar.addResource({
      id: "eeeee",
      title: "Room EEEEE"
    });
    var testing = calendar.getResources();
    console.log(testing.length);
  });

Demo: https://codepen.io/ADyson82/pen/oNYGOMN

Related