ansaurus

Question

Answer 1

A:

You need to tell the control where to load event data from when you initialize it. Your choices are to specify a json feed, an array of events or a function you write which will retrieve all of the events.

If you use the function or json method, the fullcalendar control will only attempt to load data for the range the user is attempting to view. So when the user navigates to the next month, that months events will be retrieved from the feed/function.

theycallmemorty 2010-08-11 19:31:50

Hey Morty,Thanks for the help. I am trying to avoid pulling ALL of the data in my CF/JSON feed. If somebody clicks on the next/prev month, I want it to go retrieve that month's data from the DB. It seems like a lot of over-head to pull EVERYTHING out of the DB when there is a chance that not everything is needed. (why pull a years worth of data if the user is only looking at the current month)

Josh 2010-08-11 20:20:25

@Josh The fullcalendar automatically adds some parameters to the path you specify for the json feed. See here: http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/ You can use the `start` and `end` parameters to query your database for only the events required!

theycallmemorty 2010-08-11 20:59:55

Answer 2

A:

Define an events callback to make an ajax request to your api. See the docs here. Here's an example integrating with my api that uses epoch start and end as get parameters in the lookups.

$('#calendar').fullCalendar({
    // other options here...

    events: function(start, end, callback) {
        start = start.getTime()/1000;
        end = end.getTime()/1000;
        $.ajax({
            url: '/api/events/1/?start='+ start + '&end=' + end,
            dataType: 'json',
            success: function(doc) {
                var my_events = [];
                $.each(doc.person.events, function (index, elem) {
                   my_events.push({
                       title: elem.event.title,
                       start: elem.event.start,
                       end: elem.event.end,
                   });
                });
            callback(my_events);
          }
        });
    }
});

In my actual code (this is a trimmed down version) I do more with the ajax request. You can also simplify this using fullcalendar's json feed events that will pass the start and end epoch dates get parameters for you. For example:

$('#calendar').fullCalendar({
    events: "/api/events/1/"
});

Both of these solutions will make api calls to your server like http://yourwebsite.com/api/events/1/?start=123454444&end=12355324234 so you'll need to set up your server to handle that appropriately.

NOTE: In case your wondering, the "1" in these urls is used to identify the id of the user to fetch the events for.

The docs for fullcalendar are wonderful, read them, and then read them again.

sdolan 2010-08-11 19:43:59

I think this might be the solution I am after. Where is the function getting the start, end and callback values from? I need to pass the viewed month/year to the JSON file through fullcalendar. I will give it a shot and let you know.Are you kidding me, the fullcalendar documentation is HORRIBLE!!! How about some examples or code snippets in the documentation. Would be nice to see how the code is implemented rather than what they have. How about with the JSON example it shows. Doesn't show hot to format the time at all, just has dates. Documentation is way lacking IMHO.

Josh 2010-08-11 20:25:35

The `events` callback is passed into the options and then called with the arguments `start, end, callback` in the fullcalendar internals. As for the documentation, keep in mind this is one guy who developed, documented, and open sourced it. It's pretty darned good compared to most other packaged. The format time stuff is explained in the `EventObject` documentation code very clearly. And where the documentation is lacking there is always the source code to reference.

sdolan 2010-08-11 21:19:58

ansaurus

tags:

views:

answers:

Pulling Data for next/prev months

related questions