Forums

Aeron Cal. multi-cal onHideComplete different code

moleculezz 25 May, 2010
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?
Max_admin 26 May, 2010
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
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
GreyHead 26 May, 2010
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
moleculezz 27 May, 2010
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.
moleculezz 27 May, 2010
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.
GreyHead 27 May, 2010
Hi moleculezz,

Sorry, I misread the example :-(

Bob
moleculezz 27 May, 2010
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!
GreyHead 28 May, 2010
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
moleculezz 28 May, 2010
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.
This topic is locked and no more replies can be posted.