Aeron Cal. multi-cal onHideComplete different code

Hello,

I am using the multi-calendar feature. I also am using the
"onHideComplete" property to execute some code.
The problem is that when you use the multi-calendar there doesn't seem
to be a way to execute different code for each calendar.

mutli-calendar setup:

cals = new Calendar( {datum: 'd/m/Y', datum_retour: 'd/m/Y'}, {direction: .5, pad: 1, classes: ['dashboard'], onHideComplete: someFunction } );

var someFunction = function() {
        //do something

} 

I tried the following, but it doesn't work:

var someFunction = function() {
        if(this.getProperty('id') == 'datum') {
                //do something
        }

        if(this.getProperty('id') == 'datum_retour'){
                //do something else
        }

} 

Is there a way to target each different calendar individually using
the "id" of the form input?

Hi,

I didn't try to do this with the calendar before but try to use the function right inside the calendar instance ? also did you try this with a single instance and it worked ?

I suggest you look at the calendar class and see what "this" will contain when you have a single or multiple calendar(s)

Regards,
Max

Hi moleculezz,

The OnHideComplete function certainly works with one calendar - I used it this week.

The Aeron docs include this example

myCal = new Calendar({
  day1: { monthyear1: 'Y-m', day1: 'd' },
  day2: { monthyear2: 'Y-m', day2: 'd' },
  day3: { monthyear3: 'Y-m', day3: 'd' }
}, { pad: 2 }); 

which suggests that you can add separate parameters for each calendar.

Bob

Not sure what you mean by using the function right inside the calendar instance.
I did try this with a single instance and it works. Since the calendar objects were created automatically by chronoforms:

window.addEvent('domready', function() {
myCal_datum = new Calendar({ datum: 'd/m/Y' }, { classes: ['dashboard'], direction: .5 });
myCal_datum_retour = new Calendar({ datum_retour: 'd/m/Y' }, { classes: ['dashboard'], direction: .5 });
}); 

I did the following:

myCal_datum.addEvent('onHideComplete', someFunction);
myCal_datum_retour.addEvent('onHideComplete', someOtherFunction);

Now if I add this code for the multi-calendar instance it would add the same function for both. So I thought maybe in the function that is being called I need to do an exception. But don't know how to target the different calendars.

Hey Bob,
How would I add seperate parameters for each calendar?
From the calendar class constructor I understand that the following notation is required to make it work:
// initialize: calendar constructor
// @param obj (obj) a js object containing the form elements and format strings { id: 'format', id: 'format' etc }
// @param props (obj) optional properties

The object would be the multi-calendars, but the options would be the same for the multi-calendars.

Hi moleculezz,

Sorry, I misread the example :-(

Bob

I'm thinking that on execution it somehow has to know which input it needs to target. So it has to have some kind of reference to the input "id". But how do I get this info!

Hi moleculezz,

I found this code inside an unpacked version of the calendar script.

		this.fx = this.calendar.effect('opacity', { 
			onStart: function() { 
				if (this.calendar.getStyle('opacity') == 0) { // show
					if (window.ie6) { this.iframe.setStyle('display', 'block'); }
					this.calendar.setStyle('display', 'block');
					this.fireEvent('onShowStart', this.element);
				}
				else { // hide
					this.fireEvent('onHideStart', this.element);
				}
			}.bind(this),
			onComplete: function() { 
				if (this.calendar.getStyle('opacity') == 0) { // hidden
					this.calendar.setStyle('display', 'none');
					if (window.ie6) { this.iframe.setStyle('display', 'none'); }
					this.fireEvent('onHideComplete', this.element);
				}
				else { // shown
					this.fireEvent('onShowComplete', this.element);
				}
			}.bind(this)
		});

My JavaScript isn't good enough to be certain but maybe 'this' is available to identify the id of the current calendar?

Bob

Yeah, "this" references the calendar object. But the problem is that it is the object containing both calendars.
So, this.calendars[0].val would output the date string of the first one and this.calendars[1].val
outputs the second.
But I can't seem to figure out or find where it references which one it is using currently.