My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
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
Status:  Done
Owner:  ----
Closed:  Apr 2010


Sign in to add a comment
 
Reported by yowza...@gmail.com, Feb 12, 2010
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
I just read  Issue 334  regarding arrays of event sources. Perhaps that could help with this 
in some way.
Feb 26, 2010
Project Member #2 adamrs...@gmail.com
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
#3 yowza...@gmail.com
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
Project Member #4 adamrs...@gmail.com
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

Powered by Google Project Hosting