Patch for Calendar EightySix 1.1 to support MooTools 1.3

calendar-eightysix-mootools-1.3.patch

--- C:/Users/christiaan/Downloads/calendar-eightysix-v1.1/js/calendar-eightysix-v1.1.js	Sun Apr 25 19:02:52 2010
+++ P:/klantendossier/release/www/layout/js/calendar-eightysix-v1.1-uncompressed.js	Wed May 18 11:12:02 2011
@@ -79,11 +79,11 @@
 		});
 		
 		//Create the currect selected date
-		if($defined(this.options.defaultDate)) 
+		if(this.options.defaultDate != null) 
 			this.selectedDate = new Date().parse(this.options.defaultDate).clearTime();
-		else if(this.options.linkWithInput && $chk(this.target.get('value'))) 
+		else if(this.options.linkWithInput && this.target.get('value') != null) 
 			this.selectedDate = new Date().parse(this.target.get('value')).clearTime();
-		if(!$defined(this.selectedDate) || !this.selectedDate.isValid()) 
+		if(!this.selectedDate == null || !this.selectedDate.isValid()) 
 			this.selectedDate = this.today.clone();
 		
 		//Create the HTML base of the calender
@@ -92,9 +92,9 @@
 		this.element = new Element('div', { 'class': 'calendar-eightysix', 'html': innerHtml, 'style': 'display: '+ (this.options.alwaysShow ? 'block' : 'none') }).addClass(this.options.theme);
 		
 		//Add the calender to the document and position it
-		if(this.options.injectInsideTarget) this.element.injectBottom(this.target);
+		if(this.options.injectInsideTarget) this.element.inject(this.target, 'bottom');
 		else {
-			this.element.injectBottom($(document.body));
+			this.element.inject($(document.body), 'bottom');
 			this.position();
 			window.addEvent('resize', this.position.bind(this));
 		}
@@ -114,17 +114,17 @@
 		this.arrowRight.addEvent('click', this.slideRight.bind(this));
 		
 		//Create dates ranges
-		if($defined(this.options.minDate)) {
+		if(this.options.minDate != null) {
 			this.options.minDate = Date.parse(this.options.minDate).clearTime();
 			if(!this.options.minDate.isValid()) this.options.minDate = null;
 		}
-		if($defined(this.options.maxDate)) {
+		if(this.options.maxDate != null) {
 			this.options.maxDate = Date.parse(this.options.maxDate).clearTime();
 			if(!this.options.maxDate.isValid()) this.options.maxDate = null;
 		}
 		
 		//Parse excluded dates
-		if($defined(this.options.excludedDates)) {
+		if(this.options.excludedDates != null) {
 			var excludedDates = [];
 			this.options.excludedDates.each(function(date) {
 				excludedDates.include(this.format(new Date().parse(date).clearTime(), '%t'));
@@ -141,7 +141,7 @@
 		
 		//Create hidden input
 		if(this.options.createHiddenInput) {
-			this.hiddenInput = new Element('input', { 'type': 'hidden', 'name': this.options.hiddenInputName }).injectAfter(this.target);
+			this.hiddenInput = new Element('input', { 'type': 'hidden', 'name': this.options.hiddenInputName }).inject(this.target, 'after');
 		}
 		
 		//Link with the input element
@@ -151,20 +151,20 @@
 			}.bind(this));
 		}
 		//Or toggler...
-		if($defined(this.options.toggler)) this.options.toggler = $(this.options.toggler);
+		if(this.options.toggler != null) this.options.toggler = $(this.options.toggler);
 		
 		//Add show and hide events
-		($defined(this.options.toggler) ? this.options.toggler : this.target).addEvents({
+		(this.options.toggler != null ? this.options.toggler : this.target).addEvents({
 			'focus': this.show.bind(this), 'click': this.show.bind(this)
 		});
 		
 		if(!this.options.alwaysShow) document.addEvent('mousedown', this.outsideClick.bind(this));
-		MooTools.lang.addEvent('langChange', function() { this.render(); this.pick(); }.bind(this));
+		Locale.addEvent('langChange', function() { this.render(); this.pick(); }.bind(this));
 		
 		//Other events
 		if(this.target.get('tag') == 'input') {
 			this.target.addEvent('keydown', this.onKeyDown.bind(this));
-			if(this.options.disallowUserInput) this.target.addEvent('contextmenu', ($lambda(false)));
+			if(this.options.disallowUserInput) this.target.addEvent('contextmenu', (Function.from(false)));
 		}
 		
 		//See if the date is correct
@@ -198,21 +198,21 @@
 		this.currentContainer.empty().addClass('c86-month');
 		if(this.options.pickable) this.currentContainer.addClass('c86-pickable');
 		
-		var lang = MooTools.lang.get('Date'), weekdaysCount = this.viewDate.format('%w') - (this.options.startMonday ? 1 : 0);
+		var lang = Locale.get('Date'), weekdaysCount = this.viewDate.format('%w') - (this.options.startMonday ? 1 : 0);
 		if(weekdaysCount == -1) weekdaysCount = 6;
 		
 		//Label
 		this.label.set('html', lang.months[this.viewDate.get('month')] +' '+ this.viewDate.format('%Y'));
 		
 		//Day label row
-		var row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+		var row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		for(var i = (this.options.startMonday ? 1 : 0); i < (this.options.startMonday ? 8 : 7); i++) {
-			var day = new Element('div', { 'html': lang.days[this.options.startMonday && i == 7 ? 0 : i] }).injectBottom(row);
+			var day = new Element('div', { 'html': lang.days[this.options.startMonday && i == 7 ? 0 : i] }).inject(row, 'bottom');
 			day.set('html', day.get('html').substr(0, 2));
 		}
 		
 		//Add days for the beginning non-month days
-		row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+		row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		y = this.viewDate.clone().decrement('month').getLastDayOfMonth();
 		for(var i = 0; i < weekdaysCount; i++) {
 			this.injectDay(row, this.viewDate.clone().decrement('month').set('date', y - (weekdaysCount - i) + 1), true);
@@ -222,7 +222,7 @@
 		for(var i = 1; i <= this.viewDate.getLastDayOfMonth(); i++) {
 			this.injectDay(row, this.viewDate.clone().set('date', i));
 			if(row.getChildren().length == 7) {
-				row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+				row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 			}
 		}
 		
@@ -234,7 +234,7 @@
 		
 		//Always have six rows
 		for(var y = this.currentContainer.getElements('.c86-row').length; y < 7; y++) {
-			row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+			row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 			for(var z = 0; z < 7; z++) {
 				this.injectDay(row, startDate.clone().set('date', i), true);
 				i++;
@@ -246,14 +246,14 @@
 	
 	//Used by renderMonth
 	injectDay: function(row, date, outside) {
-		var day = new Element('div', { 'html': date.get('date') }).injectBottom(row);
+		var day = new Element('div', { 'html': date.get('date') }).inject(row, 'bottom');
 		day.store('date', date);
 		if(outside) day.addClass('c86-outside');
 		
-		if(($defined(this.options.minDate) && this.format(this.options.minDate, '%t') > this.format(date, '%t')) || 
-		   ($defined(this.options.maxDate) && this.format(this.options.maxDate, '%t') < this.format(date, '%t')) ||
-		   ($defined(this.options.excludedWeekdays) && this.options.excludedWeekdays.contains(date.format('%w').toInt())) ||
-		   ($defined(this.options.excludedDates) && this.options.excludedDates.contains(this.format(date, '%t'))))
+		if((this.options.minDate != null && this.format(this.options.minDate, '%t') > this.format(date, '%t')) || 
+		   (this.options.maxDate != null && this.format(this.options.maxDate, '%t') < this.format(date, '%t')) ||
+		   (this.options.excludedWeekdays != null && this.options.excludedWeekdays.contains(date.format('%w').toInt())) ||
+		   (this.options.excludedDates != null && this.options.excludedDates.contains(this.format(date, '%t'))))
 			day.addClass('c86-non-selectable');
 		else if(this.options.pickable) day.addEvent('click', this.pick.bind(this));
 		
@@ -264,26 +264,26 @@
 	renderYear: function() {
 		this.view = 'year';
 		this.currentContainer.addClass('c86-year-decade');
-		var lang = MooTools.lang.get('Date').months;
+		var lang = Locale.get('Date').months;
 		
 		//Label
 		this.label.set('html', this.viewDate.format('%Y'));
 		
-		var row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+		var row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		for(var i = 1; i < 13; i++) {
-			var month = new Element('div', { 'html': lang[i - 1] }).injectBottom(row);
+			var month = new Element('div', { 'html': lang[i - 1] }).inject(row, 'bottom');
 			month.set('html', month.get('html').substr(0, 3)); //Setting and getting the innerHTML takes care of html entity problems (e.g. [M&a]uml;r => [Mär]z)
 			var iMonth = this.viewDate.clone().set('month', i - 1);
 			month.store('date', iMonth);
 			
-			if(($defined(this.options.minDate) && this.format(this.options.minDate.clone().set('date', 1), '%t') > this.format(iMonth, '%t')) ||
-			   ($defined(this.options.maxDate) && this.format(this.options.maxDate.clone().set('date', 1), '%t') < this.format(iMonth, '%t')))
+			if((this.options.minDate != null && this.format(this.options.minDate.clone().set('date', 1), '%t') > this.format(iMonth, '%t')) ||
+			   (this.options.maxDate != null && this.format(this.options.maxDate.clone().set('date', 1), '%t') < this.format(iMonth, '%t')))
 				month.addClass('c86-non-selectable');
 			else month.addEvent('click', this.levelDown.bind(this));
 			
 			if(i - 1 == this.today.get('month') && this.viewDate.get('year') == this.today.get('year')) month.addClass('c86-today');
 			if(i - 1 == this.selectedDate.get('month') && this.viewDate.get('year') == this.selectedDate.get('year')) month.addClass('c86-selected');
-			if(!(i % 4) && i != 12) row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+			if(!(i % 4) && i != 12) row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		}
 		
 		this.renderAfter();
@@ -301,19 +301,19 @@
 		//Label
 		this.label.set('html', startYear +' &#150; '+ (startYear + 11));
 		
-		var row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+		var row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		for(var i = startYear; i < startYear + 12; i++) {
-			var year = new Element('div', { 'html': i }).injectBottom(row);
+			var year = new Element('div', { 'html': i }).inject(row, 'bottom');
 			var iYear = this.viewDate.clone().set('year', i);
 			year.store('date', iYear);
 			
-			if(($defined(this.options.minDate) && this.options.minDate.get('year') > i) ||
-			   ($defined(this.options.maxDate) && this.options.maxDate.get('year') < i)) year.addClass('c86-non-selectable');
+			if((this.options.minDate != null && this.options.minDate.get('year') > i) ||
+			   (this.options.maxDate != null && this.options.maxDate.get('year') < i)) year.addClass('c86-non-selectable');
 			else year.addEvent('click', this.levelDown.bind(this));
 			
 			if(i == this.today.get('year')) year.addClass('c86-today');
 			if(i == this.selectedDate.get('year')) year.addClass('c86-selected');
-			if(!((i + 1) % 4) && i != startYear + 11) row = new Element('div', { 'class': 'c86-row' }).injectBottom(this.currentContainer);
+			if(!((i + 1) % 4) && i != startYear + 11) row = new Element('div', { 'class': 'c86-row' }).inject(this.currentContainer, 'bottom');
 		}
 		
 		this.renderAfter();
@@ -327,11 +327,11 @@
 			rows[i].set('class', 'c86-row '+ ['a', 'b', 'c', 'd', 'e', 'f', 'g'][i] +' '+ (i % 2 ? 'c86-even' : 'c86-odd')).getFirst().addClass('c86-first');
 			rows[i].getLast().addClass('c86-last');
 			
-			if( (this.view == 'month' && i == 1 && $defined(this.options.minDate) && this.options.minDate.diff(this.viewDate) <= 0) ||
-				(this.view != 'month' && i == 0 && $defined(this.options.minDate) && this.format(this.options.minDate, '%t') >= this.format(rows[i].getFirst().retrieve('date'), '%t')) )
+			if( (this.view == 'month' && i == 1 && this.options.minDate != null && this.options.minDate.diff(this.viewDate) <= 0) ||
+				(this.view != 'month' && i == 0 && this.options.minDate != null && this.format(this.options.minDate, '%t') >= this.format(rows[i].getFirst().retrieve('date'), '%t')) )
 				this.arrowLeft.setStyle('visibility', 'hidden');
 			
-			if(i == rows.length - 1 && $defined(this.options.maxDate)) {
+			if(i == rows.length - 1 && this.options.maxDate != null) {
 				if((this.view == 'month' && this.options.maxDate.diff(this.viewDate.clone().increment('month').decrement()) >= 0) ||
 				   (this.view == 'year' &&  this.format(this.options.maxDate, '%t') <= this.format(rows[i].getLast().retrieve('date').clone().increment('month'), '%t')) ||
 				   (this.view == 'decade' && this.format(this.options.maxDate, '%t') <= this.format(rows[i].getLast().retrieve('date').clone().increment('year'), '%t')))
@@ -339,7 +339,7 @@
 			}
 		};
 		
-		if($defined(this.$events['render'+ this.view])) {
+		if(this.$events['render'+ this.view] != null) {
 			var elements = this.currentContainer.getElements('div[class~=c86-row] > div');
 			if(this.view == 'month') {
 				for(var i = 0; i < 7; i++) elements[i] = null;
@@ -466,7 +466,7 @@
 	show: function() {
 		if(!this.visible & !this.options.alwaysShow) {
 			this.visible = true;
-			if(!Browser.Engine.trident) {
+			if(!Browser.ie) {
 				this.element.setStyles({ 'opacity': 0, 'display': 'block' });
 				if(!this.options.injectInsideTarget) this.position();
 				this.element.set('tween', { 'duration': this.options.toggleDuration, 'transition': this.options.fadeTransition }).fade('in');
@@ -480,7 +480,7 @@
 	hide: function() {
 		if(this.visible & !this.options.alwaysShow) {
 			this.visible = false;
-			if(!Browser.Engine.trident) {
+			if(!Browser.ie) {
 				this.element.set('tween', { 'duration': this.options.toggleDuration, 'transition': this.options.fadeTransition,
 											'onComplete': function() { this.element.setStyle('display', 'none') }.bind(this) }).fade('out');
 			} else this.element.setStyle('display', 'none');
@@ -506,7 +506,7 @@
 	/* Formating and picking */
 	
 	pick: function(e) {
-		if($defined(e)) {
+		if(e != null) {
 			this.selectedDate = $(e.target).retrieve('date');
 			this.element.getElements('.c86-selected').removeClass('c86-selected');
 			$(e.target).addClass('c86-selected');
@@ -534,7 +534,7 @@
 			}
 		}
 		
-		if($defined(this.hiddenInput)) this.hiddenInput.set('value', this.format(this.selectedDate, this.options.hiddenInputFormat));
+		if(this.hiddenInput != null) this.hiddenInput.set('value', this.format(this.selectedDate, this.options.hiddenInputFormat));
 		this.fireEvent('change', this.selectedDate);
 		
 		return this;
@@ -542,8 +542,8 @@
 	
 	//Extended format parser
 	format: function(date, format) {
-		if(!$defined(format)) format = this.options.format;
-		if(!$defined(date)) return;
+		if(format == null) format = this.options.format;
+		if(date == null) return;
 		format = format.replace(/%([a-z%])/gi,
 			function($1, $2) {
 				switch($2) {
@@ -588,19 +588,19 @@
 	//Checks if the date is an excluded date, excluded weekday or isn't within the range
 	//If so it returns a correct pickable date
 	correctDate: function(date, right) {
-		if(!$defined(right)) right = true;
+		if(right == null) right = true;
 		
 		//Check if the date is lower than the minimal date
-		if($defined(this.options.minDate) && date.diff(this.options.minDate) > 0) date = this.options.minDate.clone();
+		if(this.options.minDate != null && date.diff(this.options.minDate) > 0) date = this.options.minDate.clone();
 		//Check if the date is higher than the maximum date
-		else if($defined(this.options.maxDate) && date.diff(this.options.maxDate) < 0) date = this.options.maxDate.clone();
+		else if(this.options.maxDate != null && date.diff(this.options.maxDate) < 0) date = this.options.maxDate.clone();
 		
 		//Check if the currect picked weekday is allowed
 		var i = 0;
-		while( ($defined(this.options.excludedWeekdays) && this.options.excludedWeekdays.contains(date.format('%w').toInt())) ||
-			   ( ($defined(this.options.minDate) && date.diff(this.options.minDate) > 0) ||
-				 ($defined(this.options.maxDate) && date.diff(this.options.maxDate) < 0) ) ||
-			   ($defined(this.options.excludedDates) && this.options.excludedDates.contains(this.format(date, '%t'))) ) {
+		while( (this.options.excludedWeekdays != null && this.options.excludedWeekdays.contains(date.format('%w').toInt())) ||
+			   ( (this.options.minDate != null && date.diff(this.options.minDate) > 0) ||
+				 (this.options.maxDate != null && date.diff(this.options.maxDate) < 0) ) ||
+			   (this.options.excludedDates != null && this.options.excludedDates.contains(this.format(date, '%t'))) ) {
 			if(i == 31) right = !right; //Reverse
 			else if(i == 62) {
 				date = this.options.minDate.clone();
@@ -616,12 +616,12 @@
 	},
 	
 	setDate: function(value, pick) {
-		if(!$defined(pick)) pick = true;
+		if(pick == null) pick = true;
 		
-		if($type(value) == 'date') {
+		if(typeOf(value) == 'date') {
 			var date = value.clearTime();
 		} else {
-			var date = $chk(value) ? new Date().parse(this.target.get('value')).clearTime() : new Date().clearTime();
+			var date = value != null ? new Date().parse(this.target.get('value')).clearTime() : new Date().clearTime();
 		}
 		
 		if(date.isValid()) {
@@ -637,4 +637,4 @@
 	getDate: function() {
 		return this.selectedDate;
 	}
-});
\ No newline at end of file
+});

Internet Explorer seems to work fine. In Firefox showing and hiding a calendar once works fine, however when requesting the calendar again it doesn't pop-up or only briefly.

For getting CalendarEightysix to work with MooTools 1.4.1+ apply this patch, then replace line 424 with this.currentContainer.empty().removeClass('c86-month').removeClass('c86-year-decade').setStyles({ 'opacity': 1, 'visibility': 'visible', 'display': 'block', 'z-index': 999 });

Element.fade() by default now also sets visibility:hidden, so when switching from months to the datepicker again, the 2nd container will never be visible.

Hi Htbaa,

I am having problems with CalendarEightysix making to work when I clicked a date on the calendar it should send ajax query to mysql displaying the available time slots. Can you help me with the scripting please.

Thanks!