help with javascrip calenders/booking

[iflyjetz]

Hi guys,

I am trying to mimick/ copy a third party calender into a redesign of a site.
There is code for updating the calender for the "book a room" section in the sidebar to the current date which does not seem to work:
http://bit.ly/4oBMiy

Link to the correctly working page:
http://bit.ly/4Gmjjg

Many Thanks for your help,

iflyjetz

[jscheuer1]

There could be other problems. But neither the calendar_booking.js script or its code are associated with the page that is missing the calendar. That page is also missing the on page calendarInit call.

[iflyjetz]

Thanks John,

Those scripts are now linked but did not solve the issue unfortunately.

Regards,
iflyjetz

[jscheuer1]

You are still missing some scripts, I think the order they are in won't work, and:

As you are already runing another jQuery script on that page in noConflict mode, this code (as written) won't run:

var calendarInit = function(){
	$(".dateBooking").datepicker({
		dateFormat:'dd-mm-yy',
		navigationAsDateFormat: true,
		minDate: new Date(2009,12-1,11), 
		maxDate: new Date(2010,12-1,11),
		beforeShow: readLinked,
		onSelect: updateLinked, 
		showOn: "both",
		buttonImage: "https://www.ires.ie/images/callendar.gif",
		buttonImageOnly: true,
		firstDay: 1
	}); 
	
	$("select[name=doa_dd]").change();
}


$(document).ready(function(){
	setTimeout("calendarInit()", 1);
	
});

Make it like so:

var calendarInit = function(){
	var $ = jQuery;
	$(".dateBooking").datepicker({
		dateFormat:'dd-mm-yy',
		navigationAsDateFormat: true,
		minDate: new Date(2009,12-1,11), 
		maxDate: new Date(2010,12-1,11),
		beforeShow: readLinked,
		onSelect: updateLinked, 
		showOn: "both",
		buttonImage: "https://www.ires.ie/images/callendar.gif",
		buttonImageOnly: true,
		firstDay: 1
	}); 
	
	$("select[name=doa_dd]").change();
}


jQuery(document).ready(function(){
	setTimeout(calendarInit, 1);
	
});

Use this code for calendar_booking.js:

function readLinked(){var mm=jQuery("select[name=doa_mm]:first");jQuery("#doa_linked").val(jQuery("select[name=doa_dd]:first").val()+"-"+jQuery("select[name=doa_mm]:first").val()+"-"+jQuery('option:selected',mm).html().substring(4,6));}
function updateLinked(date){jQuery("select[name=doa_dd]").val(date.substring(0,2));jQuery("select[name=doa_mm]").val(date.substring(3,5));}
jQuery(document).ready(function(){jQuery("select[name=doa_dd]").change(function(){jQuery("select[name=doa_dd]").val(jQuery(this).val());readLinked();});jQuery("select[name=doa_mm]").change(function(){jQuery("select[name=doa_mm]").val(jQuery(this).val());readLinked();});})

The scripts in the head should be ordered like so:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

<script language="javascript">
function createWindow(cUrl,cName,cFeatures) {
var xWin = window.open(cUrl,cName,cFeatures)
}</script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imageMenu.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ires.ie/scripts/ui.jquery.js"></script>
<script type="text/javascript" src="http://www.ires.ie/scripts/calendar_booking.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="SpryAssets/SpryMenuBar.js" ></script>

<script type="text/javascript" >
 var $j = jQuery.noConflict();
$j("#content").corner()
$j("#navbar").corner()
$j(".AccordionPan . . .

[iflyjetz]

John,

As always thank you.

The calender seems to be working a charm.

What I'm wondering is what mechanism updates the calender to the current date. Obviously trying to book a date in the past results in an error message. On the site as it is now(old version) the current date is already selected.

When I copied the code over, there was a "SELECTED" beside the 9 in the options.

How was this done? If its too much I suppose I can just leave it blank. Or do you know if it will auto update for the correct month?

Regards and Thanks,
iflyjetz

EDIT: Or to put it more simply, the first bookable day now on the calender is 11-Dec-09 which is obviously in the past!

[jscheuer1]

Looks like it is working OK (more or less) now. But you can get rid of this:

<script type="text/javascript" src="http://www.ires.ie/style/scripts/jquery.js"></script>

It's a 404 not found. And you may want to try this as your calendarInit:

var calendarInit = function(){
	var $ = jQuery, begin = new Date(), end = new Date(), beginMo;
	begin.setDate(begin.getDate() + 1);
	end.setDate(end.getDate() + 1);
	beginMo = begin.getMonth();
	end.setFullYear(end.getFullYear() + 1);
	$(".dateBooking").datepicker({
		dateFormat:'dd-mm-yy',
		navigationAsDateFormat: true,
		minDate: begin, 
		maxDate: end,
		beforeShow: readLinked,
		onSelect: updateLinked, 
		showOn: "both",
		buttonImage: "https://www.ires.ie/images/callendar.gif",
		buttonImageOnly: true,
		firstDay: 1
	});
	function padMoDy(n){
		if(n < 10){
			return '0' + n;
		}
		return n;
	}
	$("select[name=doa_dd]").val(padMoDy(begin.getDate() + 1)).change();
	$("select[name=doa_mm]").val(padMoDy(beginMo + 1)).change();
}

jQuery(document).ready(function(){
	setTimeout(calendarInit, 1);	
});

The only thing I'm not real clear on is how the select elements named "doa_dd" and "doa_mm" are populated with their respective option tags. It looks like these are hard coded to the page. If so, in shorter months there would be a possibility of choosing a nonexistent date. And the options for "doa_mm" would need to be manually changed each month.