My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 572: Add options for multiple calendars on one fullCalendar instance
3 people starred this issue and may be notified of changes. Back to list
Status:  Done
Owner:  ----
Closed:  Aug 2010


Sign in to add a comment
 
Reported by ojohnnie...@aol.com, Jul 24, 2010
So I have a a calendar set up similar to Apple's iCal where as I have multiple calendars displayed on a single fullCalendar instance.

I want to have a sidebar list of the calendars (Home, Work, Birthday's, etc) with a checkbox so the user can show/hide the various calendars.

I've modified fullCalendar, but I don't think my method is ideal. Preferably I would think that you could "hide" these elements while rendering the overlay, but the way you are calculating the segments, this doesn't seem to be possible. I've gotten around this somewhat, but I'm still experiencing a few issues.

Here's what I'm doing, but perhaps someone can recommend a better way of doing this.


1) Add two new variables to the Event Object.

calendarId = (Number||String) Basically the same as the event ID, 
    but this ID refers to the calendar group.

hidden = (Boolean) When generating your events you can specify 
    if this is already hidden or not. Useful if you plan on setting cookies, etc.


2) Add 2 new variables to fullCalendar this.each(function()). These are needed since you seem to be modifying the original "events" variable for various actions (removeEvents, etc)

hiddenEvents = (Array) An array of all the hidden event objects

hiddenEventSources = (Array) An array of all the hidden event source objects


3) Added a new section under public functions. Essentially we need the hideCalendarEvents will function similar to how removeEvents functions, except instead of removing them completely, we move any event objects, with it's "hidden" variable set, into the "hidden" arrays. And then set the "events" and "eventSources" array to only hold objects that are not hidden

//
// Calendar Manipulation
//
// function can be called like:
// $(YourCalendarElm).fullCalendar('hideCalendarEvents' [, List of ids]);
//

hideCalendarEvents: function(filter) {
	var i, evts = events.concat(hiddenEvents), evtSrc = eventSources.concat(hiddenEventSources);
	hiddenEvents = [];
	hiddenEventSources = [];
	if (!filter||filter.length === 0) { // hide all
		events = [];
		// hide all array sources
		for (i=0; i<eventSources.length; i++) {
			if (typeof eventSources[i] == 'object') {
				eventSources[i] = [];
			}
		}
		hiddenEvents = evts;
		hiddenEventSources = evtSrc;
	}else{
		if (!$.isFunction(filter)) { // an array of calendar ID(s)
			var cid = filter;
			filter = function(e) {
				return cid.indexOf(e._calendarId) > -1;
			};
		}
		events = $.grep(evts, filter, false);
		hiddenEvents = $.grep(evts, filter, true);
		// hide events from array sources
		for (i=0; i<eventSources.length; i++) {
			if (typeof eventSources[i] == 'object') {
				eventSources[i] = $.grep(evtSrc[i], filter, false);
				hiddenEventSources = $.grep(evtSrc[i], filter, true);
			}
		}
	}
	eventsChanged();
},


Now the only problem I see with doing it this way, is that I will have to join the events array with the hidden events array each time you do something like removeEvents and then call the hideCalendarEvents function after each operation. Not sure if this is the optimal way of doing things.

Ideally, it would be better to handle this operation during the overlay rendering operation, but I'm not 100% sure how that's possible with how it's currently setup.

This is a great plugin and I appreciate all the hard work put into it.
Jul 24, 2010
#1 ojohnnie...@aol.com
Also, I had to modify updateEvent and normalizeEvent to handle the addition of the two new EventObject variables.
Aug 25, 2010
#2 ojohnnie...@aol.com
Can you change the owner of this post/comment? I was accidentally logged in my client...

This post belongs to StlDoug (Same owner of post 559)
Aug 25, 2010
Project Member #3 adamrs...@gmail.com
your best bet is to group events into "event sources" and add/remove them dynamically
http://arshaw.com/fullcalendar/docs/event_data/addEventSource/
http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/

beyond this, i cant help you with your app
Status: Done
Sign in to add a comment

Powered by Google Project Hosting