Toggling the visibility of events using their CSS classes

Scheduler Javascript
#1

Hello,

I have been investigating options for me to be able to allow the user to turn on and off the visibility of event classes.

I have got it partially working using jQuery toggle() which enables me to turn their visibility on and off using the css property:

display:none

Unfortunately this does not work when switching between the views of the calendar.

I have asked about this on stackoverflow (stackoverflow.com/questions/5268 … ery-toggle) and have had a few responses which I have tried but have not worked.

Do you have any ideas on how I could best implement this?

Thanks,

Tim

#2

Hello, Tim.

Check the following sample:

[code]

html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } .hide { display: none; }
 
 
[/code] Logic behind this: if by some properties you decide that you don't want to display certain events then you simple assign them "hide" CSS class which will turn off their display. If you want to hide them after user clicked some button for example, when you will need to change events' certain properties and refresh current view.

Another option is to use event filtering:

scheduler.filter_day=function(id, event){ if(event.hide) return false; // event won't be displayed return true; }
here “day” is the name of the mode. You may assign same function to all modes you are using:

scheduler.filter_month=scheduler.filter_week=scheduler.filter_day=function(id, event){

Best regards,
Ilya

#3

Hello,

Thanks for getting back to me.

Am I able to apply a filter without having to reload the calendar? In other words. Can i use some javascript to make these changes live without an update?

Tim

#4

Hello,

Just to be clear, by reloading calendar i mean

scheduler.setCurrentView(scheduler.getState().date, scheduler.getState().mode);

Calendar need to re-render itself to apply new values.

Best regards,
Ilya