Results 1 to 6 of 6

Thread: help with javascrip calenders/booking

  1. #1
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default help with javascrip calenders/booking

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,

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

    Regards,
    iflyjetz

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    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:

    Code:
    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:

    HTML Code:
    <!--[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 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2009
    Posts
    15
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    <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:

    Code:
    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.
    Last edited by jscheuer1; 12-16-2009 at 03:20 AM. Reason: minor code improvements
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •