Issue 878: More easily toggle event visibility
Status:  ExportedToGithub
Owner: ----
Closed:  Aug 2015
Reported by kalle.s...@googlemail.com, Mar 31, 2011
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
well for startes i could return false in the eventRender method....

rtfm!
Mar 31, 2011
#2 kalle.s...@googlemail.com
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
Project Member #3 adamrs...@gmail.com
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
#4 kalle.s...@googlemail.com
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
#5 lle...@gmail.com
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
Project Member #6 adamrs...@gmail.com
(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
Project Member #7 adamrs...@gmail.com
 Issue 1204  has been merged into this issue.
Aug 15, 2013
Project Member #8 adamrs...@gmail.com
 Issue 1295  has been merged into this issue.
Oct 30, 2013
#9 coldes...@gmail.com
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
#10 ka...@easypep.de
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
Project Member #11 adamrs...@gmail.com
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