PDA

View Full Version : help with javascrip calenders/booking



iflyjetz
12-12-2009, 12:22 PM
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
12-12-2009, 01:46 PM
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
12-14-2009, 06:23 PM
Thanks John,

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

Regards,
iflyjetz

jscheuer1
12-14-2009, 08:29 PM
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
12-15-2009, 12:08 AM
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
12-15-2009, 04:03 AM
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.