Okay, I've worked out how to set it so you can have one calendar on there, flick between them and still be able to select a start date and end date.
Also I've modified it so you can only book one day if you want.
I'll be the first to admit that the javascript is scrappy, but it works how I want it to, and that's all that matters at this time.
You will need to create 3 hidden fields in your form. This is so it can keep the position you're in when you're switching between months.
- Code: Select all
<input name="clicked" type="hidden" id="clicked"/>
<input name="dayS" type="hidden" id="dayS"/>
<input name="dayE" type="hidden" id="dayE"/>
And here's my modified function activate_dates(), I'm using the calendar in an iframe with the form in the parent page.
- Code: Select all
// make the dates clickable
function activate_dates(){
var dateStart=parent.document.getElementById('dateStart');
var dateEnd=parent.document.getElementById('dateEnd');
var clicked=parent.document.getElementById('clicked');
var dayS=parent.document.getElementById('dayS');
var dayE=parent.document.getElementById('dayE');
if (clicked.value ==''){
var click= 'one';
} else {
var click= clicked.value;
}
clicked.value=click;
var arrival='';
$$('li.clickable').each(function(el){
if(!el.hasClass('booked') ){
el.addEvent('mousedown',function(){
if ( click =='one'){
var dStart = this.id.replace( "date_", "" );
dayS.value = this.id;
var curr_date = dStart.split('-')[2];
var curr_month = dStart.split('-')[1];
var curr_year = dStart.split('-')[0];
dateStart.value=(curr_date + "/" + curr_month + "/" + curr_year);
click = 'two';
clicked.value=click;
arrival.value = dayS.value;
} else if ( click =='two') {
var dEnd = this.id.replace( "date_", "" );
dayE.value = this.id;
if (dayE.value >= dayS.value) {
var curr_date2 = dEnd.split('-')[2];
var curr_month2 = dEnd.split('-')[1];
var curr_year2 = dEnd.split('-')[0];
dateEnd.value=(curr_date2 + "/" + curr_month2 + "/" + curr_year2);
clicked.value = 'one';
click = 'three';
} else {
dateEnd.set();
}
}else{
dateStart.value='';
dateEnd.value='';
click = 'one';
}
}).setStyle('cursor','pointer');
};
})
}
Hope this helps someone out there as much as it will me.
