| Issue 878: | More easily toggle event visibility | |
| 6 people starred this issue and may be notified of changes. | Back to list |
Hey,
It would be nice to toggle specific events without removing them from the source.
or/and adding a "visible" property to the event object. if set to false the event is not visible in the calendar, and i could do sth like;
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
calEvent.visible = false;
$('#calendar').fullCalendar('updateEvent', calEvent);
}
});
which would hide the event, and reposition the surrounding elements.
its similar to the Google Calendar where i can toggle specific calendars...
great work by the way....
Mar 31, 2011
#1
kalle.s...@googlemail.com
Mar 31, 2011
ok, but the events are not "realigning", e.g: if i have two overlapping event, when i hide the first event with the return false statement, the second visible elements acts as if the first element is still visible... but it could make use of the whole day width...
Apr 2, 2011
the eventRender false issue is covered in issue 762 . however, i have heard about this desired functionality enough to realize it can be a pain. You'd traditionally do it through event source, but that can be awkward. it might be nice to have some sort of "label" property in the Event object. Then, you could toggle events on/off by label. will keep thinking about this.
Status:
Maybe
Apr 6, 2011
yes that would be nice. but i think adding more functionality is maybe not the best idea. better to keep it simple ;)
maybe adding a callback on the correct position would do a better job, and give the developer more flexibility.
i added a "eventBeforeRender" callback in which i can manipulate the event. i added this in the AgendaEventRenderer.js
function slotSegHtml(event, seg) {
var html = "<";
var url = event.url;
event = trigger('eventBeforeRender', event, event) || event;
...
}
the purpose was to change the colors of each event dynamically. with that i can do sth like:
Calendar.eventBeforeRender = function(event) {
return Calendar.eventColorization(event);
};
the Calendar.eventColorization function manipulates the borderColor etc. for each event.
i think the position is not correct, but i don't know (yet) the code enough. adding the eventBeforeRender callback before calculating the position and dimension would be better, i could do a "return false" from the callback to prevent the event from rendering and do a better job on calculating the dimensions....
Oct 26, 2012
I also needed an eventBeforeRender. I am loading two async collections into the calendar. Their display states are dependent on each other, but the async aspect of the event sources was too awkward for me to handle. And having events overlap with an invisible event (return false from eventRender) made it look like there was a bug on the calendar.
I was only concerned with AgedaView (not Basic). With this trigger, if i return false, the event does not get html and therefore does not get real estate:
eventBeforeRender:function(event,fcEvent,view)
This is how i triggered eventBeforeRender from AgendaEventRenderer.renderEvents:
function renderEvents(events, modifiedEventId) {
reportEvents(events);
var i, len=events.length,
dayEvents=[],
slotEvents=[];
for (i=0; i<len; i++) {
var triggerRes = trigger('eventBeforeRender', event, event, events[i]);
if (triggerRes === false) continue;
if (events[i].allDay) {
dayEvents.push(events[i]);
}else{
slotEvents.push(events[i]);
}
}
if (opt('allDaySlot')) {
renderDaySegs(compileDaySegs(dayEvents), modifiedEventId);
setHeight(); // no params means set to viewHeight
}
renderSlotSegs(compileSlotSegs(slotEvents), modifiedEventId);
}
Aug 13, 2013
(No comment was entered for this change.)
Summary:
More easily toggle event visibility
(was: Toggle Events)
Status: Accepted Labels: -Type-Enhancement Type-Feature
Aug 14, 2013
Issue 1204 has been merged into this issue.
Aug 15, 2013
Issue 1295 has been merged into this issue.
Oct 30, 2013
Hello, I have read through the above, what I have is 3 individual calendars loading into Full Calendar [FC] using multiple "eventSources:" Is there a way to add to my own webpage containing FC and modifying #calendar js code the ability to toggle on/off [view/hide] any of the Google Calendars -ie like on Google Calendar, ie toggle buttons sit outside FC If this solution/code exists please point me in the right direction thanks in Advance, Col
Nov 1, 2013
i ended up rerendering all event. but you could do following to remove specific events:
$el.fullCalendar("removeEvents", function(eventObject) {
return eventObject.is_google_cal_event == true;
});
....or pass any other function to filter events you want to remove.
or maybe: http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/1147 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |