| 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 |
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
Aug 25, 2010
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
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 |