| Issue 338: | How to add gcal event sources retrieved via a getJSON call | |
| 1 person starred this issue and may be notified of changes. | Back to list |
Here's the scenario. Users of my application can add the XML URL of their google
calendar feeds to their account. I have exposed a REST service that returns
information about these calendars. So a call to /services/calendars will result in:
[ {
"value" :
"http://www.google.com/calendar/feeds/kidsstring%40group.calendar.google.co
m/private-kidsstring/basic",
"type" : "GCAL",
"name" : "Kids",
"id" : 1,
"created" : "Thu, 13 Aug 2009 22:41:55 PDT"
}, {
"value" :
"http://www.google.com/calendar/feeds/personalstring%40gmail.com/private-
personalstring/basic",
"type" : "GCAL",
"name" : "Personal",
"id" : 2,
"created" : "Thu, 13 Aug 2009 22:41:55 PDT"
} ]
This information is then used to create gcalFeed objects:
var memberFeeds = function(feedUrl) {
var feeds = [];
$.getJSON(feedUrl, // + "?callback=?",
function(data){
$.each(data, function(i,item){
var type = item.type.toLowerCase();
if (type == "gcal" || type == "holiday") {
var feed = $.fullCalendar.gcalFeed(item.value, {
draggable: false,
className: type
});
feeds.push(feed);
alert("Added feed");
}
else if (type == "ical") {
//TODO
}
else {
//TODO
}
});
});
alert("Num Feeds:"+feeds.length);
return feeds;
}
Obviously, this doesn't work because of the asynchronous nature of XHR calls.
The alert at the bottom always responds with "Num Feeds: 0", because it runs
before the getJSON function runs.
The function above is used like this:
var holidaySource = $.fullCalendar.gcalFeed(
'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com
/public/basic',
{editable: false, className: 'holiday'});
var gcalFeeds = memberFeeds('/services/calendars');
var sources = [];
sources.push(holidaySource);
$.each(gcalFeeds,function(index, value) {
sources.push(value);
});
var calendar = $('#avail-calendar');
calendar.fullCalendar({
eventSources: sources
});
I could probably make this work by switching to $.ajax(async: false) instead of
using getJSON(), but I'm trying to figure out a way to do it asynchronously.
Because there are two levels of XHR requests going on, I'm having troubles
getting my head around it.
Anyone have suggestions?
Tauren
Feb 12, 2010
#1
yowza...@gmail.com
Feb 26, 2010
when you get that first list of a user's feeds, why don't you add the new gcal sources via repeated calls to addEventSource (http://arshaw.com/fullcalendar/docs/event_data/addEventSource/)? ps- i can actually foresee a slowdown w/ what i just mentioned... the events will be rerendered multiple times... a defect in addEventSource... let me know if it bothers you
Feb 26, 2010
I found that when I added all my sources during the creation of the calendar, that
the layout of the events was less likely to get messed up visually. When I would add
some sources at creation, then add more later, the events were much more likely to
overlap. Thus, I was attempting to get a list of all sources before creation. This
is now less of an issue since I've updated to 1.4.5 and the layout issues seem resolved.
I don't think I get what you are suggesting. Can you illustrate how to do this with
some sample code? Maybe I'm just not thinking through this correctly and an example
would help.
When this line executes, it returns null because it returns before its inner XHR
function runs:
var gcalFeeds = memberFeeds('/services/calendars');
So how would I loop through the results and call addEventSource to each? Doing this
doesn't even go into the loop (no alert happens):
var gcalFeeds = memberFeeds('/services/calendars');
$.each(gcalFeeds,function(index, value) {
alert(value);
calendar.addEventSource(value);
});
Maybe you are suggesting that I do it the way I am already doing it now. I'm calling
addEventSource WITHIN the XHR callback function:
var calendar = $('#calendar').fullCalendar(...);
memberFeeds("/services/calendars",calendar);
var memberFeeds = function(feedUrl,calendar) {
var feeds = [];
$.getJSON(feedUrl, // + "?callback=?",
function(data){
$.each(data, function(i,item){
var type = item.type.toLowerCase();
if (type == "gcal" || type == "holiday") {
var feed = $.fullCalendar.gcalFeed(item.value, {
draggable: false,
className: type
});
feeds.push(feed);
alert("Added feed");
calendar.fullCalendar('addEventSource',feed);
}
});
});
}
The code above is working. The code in my first post was my attempt to get a full
list of sources before creating the calendar. Now that the layout issues seem to be
fixed, this solution isn't as bad. But the main problem I have with it is that I
didn't want to have to pass in the calendar object to it. With the solution I was
attempting to make work, I didn't need a reference to the calendar, so my function
could be more generic, in another JS file, used for other non-fullCalendar things, etc.
Apr 26, 2010
glad you got this to work. sorry i cannot spend more time going over your application- specific code
Status:
Done
|
|
| ► Sign in to add a comment |