Working Demo

[ahmad510]

Is there any working demo that loads resources from ajax request ?

[amsross]

I don't know how helpful this is, but I'm using backbone/underscore and loading them in from a filtered Collection. You could just as easily replace _.map(...) with function() {...}

    resources: _.map(
        _.filter(MyApp.Collections.Users.models, function(user) {
            var groups = _.filter(user.get('groups'), function(group) {
                return group.name == "Doctors";
            });
            return groups.length;
        }),
        function (User) {
            return User.getAsResource();
        }
    ),

[jmarquesh]

Do you mean that you can do something like this:

$(...).fullcalendar({
option1: ...,
resources: function() {
//do ajax
}
});

I just tried and the function is never called. Can you point me in the right direction?

I'm having problems trying to load resources dynamically depending of the date. I tried to use setResources, but then the events are incorrectly associated with the resources (see Issue #10). Then I tried to call addEventResource and removeEventResource to set the new resources and that worked well until you go to a day without resources and then move to another day with resources. When that happens, the calendar goes back to the initial list of resources (the want you set in the options).

[amsross]

I don't think using setResources() is the right path to take, as that should reset the list of resources.

I am able to switch days without losing resources when I use addEventResource:

$('#calendar').fullCalendar({
    resources: ['resource 1', 'resource 2'],
    viewDisplay: function() {
        console.log($('#calendar').fullCalendar('getResources'));
    }
});

$('#calendar').fullCalendar('addEventResource', 'resource 3')

[josephleniston]

There is no working demo for this functionality as it requires a sever to demo but I have ajax requests working in my application. The way to do this is to combine addEventSource and addEventResource. Here is basically the code I use:

  addMyResourceToCalendar = function(my_resource_id) {
    var newResource, resources, source, my_resource, url;
    my_resource = my_resources[my_resource_id]; // a pre-populated collection of all your resources
    url = "/calendars/" + my_resource.id + "/events.json";
    source = {
      url: url,
      color: my_resource.colour,
      textColor: 'black',
      ignoreTimezone: false
    }; // an Event Source Object
    $('#calendar').fullCalendar('addEventSource', source);
    newResource = {
      id: my_resource.id,
      name: my_resource.name,
      textColor: 'black',
      color: my_resource.colour
    }; // could already store in collection as Event Resource Objects to make this code simpler
    resources = $('#calendar').fullCalendar('addEventResource', newResource);
    return Store.set("cal-" + my_resource_id, "selected");
  };

  removeMyResourceFromCalendar = function(my_resource_id) {
    var url;
    url = "/calendars/" + my_resource_id + "/events.json";
    $('#calendar').fullCalendar('removeEventSource', url);
    $('#calendar').fullCalendar('removeEventResource', my_resource_id);
    return Store.set("cal-" + my_resource_id, "");
  };

See:

• http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/
• http://arshaw.com/fullcalendar/docs/event_data/Event_Object/
• http://arshaw.com/fullcalendar/docs/event_data/addEventSource/
• http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

And the /calendars/[my_resource_id]/events.json resource recieves the following params `my_resource_id, start, end' returns an array of Event Objects

{
  "id":123,
  "title":"My Special Event",
  "description":"",
  "start":"Fri, 12 Oct 2012 16:00:00 +1300",
  "end":"Fri, 12 Oct 2012 17:00:00 +1300",
  "allDay":false,
  "recurring":false,
  "url":"/event/123",
  "resourceId":3
}

I hope this answers you questions.

[jmarquesh]

@amsross :

In my app the "events" option of the calendar is set to a function that makes an ajax call to the server. Every time the current date changes the calendar calls the function to get a new set of events and, almost always, a new set of resources as well. My resources are almost never the same for every date.

I tried to use addEventResource and removeEventResource, but if I understood the code right, the calendar is rendered after every call to any of those methods. If I am receiving a totally new list of resources and events, then the calendar will be rendered for every resource added, deleted and again after setting the new events.

I would rather use setResources to set a completely new list of resources and after that, call the callback function of the calendar with the new set of events, rendering the calendar only once.

I made some changes and now I'm able to do what I wanted.See my post in Issue #10.