Calendar - getting it to work Joomla 1.0x

I dug around in the forum, and didn't find an answer that addressed my particular issue...

I am running Chronoforms 2.3.9 on Joomla 1.015. I'm trying to get a calendar picker to work, the Joomla one has display issues.

I am trying to get the following calendar to work: http://simplythebest.net/scripts/DHTML_scripts/javascripts/javascript_48.html

The code for my form that covers the calendar is as follows:

<div id="spiffycalendar" class="text"> </div>
<?php
$tabs = new mosTabs(1);
$tabs->startPane( 'reservations' );
$tabs->startTab( 'Page 1', 'tab_1' );
?>

 <?php 
global $mainframe;
$mainframe->setPageTitle("Teal Lake Inquiry Form");
?>


 <?php
if ( $_POST['field_name'] != "" ) {
  echo "Field Name: ".$_POST['field_name']."<br />";
}
?>
<table width="100%" align="center">
	<tr>
		<td colspan="2" align="center"><strong>Inquiry/Reservation Form</strong></td></tr>
	<tr>
		<td colspan="2" align="center"><em>This is a Request form for more information. You are welcome to use it to ask for additional info, about availability, or to start the reservation process. We are happy to assist at whatever stage. Upon receiving this, we will reply via email or phone (whichever you prefer) with information on the resort or about availability. If you request a reservation we will hold your accommodation choice and dates temporarily, then call you to work out details. After all questions are answered and details discussed, then we will confirm the reservation by collecting a deposit and thus make it final. Temporary reservations can be held for one week. (shorter if last minute). You can see photos and floorplans on our website. Please click on the tabs to fill out your information, and submit the form on the last tab (above). 
Thanks! -- The Ross'</em></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><hr></td></tr>
	<tr>
		<td><strong>Names:</strong></td>
		<td><input type="text" name="names" size="25" maxlength="60"></td>
	</tr>
	<tr>
		<td width="50%"><strong>Address:</strong></td><td><input type="text" name="address1" size="25" maxlength="60"></td></tr><tr>
		<td width="50%"><strong>Address 2:</strong></td><td><input type="text" name="address2" size="25" maxlength="60"></td></tr><tr>
		<td width="50%"><strong>City, State, Zip:</strong></td><td><input type="text" name="address3" size="25" maxlength="60"></td></tr><tr>
		<td width="50%"><strong>Home Phone:</strong></td><td><input type="text" name="phone" size="25" maxlength="15"></td></tr><tr>
		<td width="50%"><strong>Work Phone:</strong></td><td><input type="text" name="wphone" size="25" maxlength="15"></td></tr><tr>
		<td width="50%"><strong>Cell Phone:</strong></td><td><input type="text" name="cphone" size="25" maxlength="15"></td></tr><tr>
		<td width="50%"><strong>Email:</strong></td><td><input type="text" name="email" size="25" maxlength="60"></td>
	</tr>
	<tr>
		<td><strong>Have you stayed with us before?</strong></td> 
		<td><select name="staybefore">
			<option value="Yes" SELECTED>Yes</option>
			<option value="No">No</option>
			</select></td></tr>
	<tr>
		<td width="50%"><strong>If no, help us to please with our marketing, and tell us how you found us? (optional)</strong></td>
		<td><select name="foundus">
			<option value="Web" SELECTED>Web</option>
			<option value="Magazine">Magazine</option>
			<option value="Search Engine">Search Engine</option>
			<option value="Print Ad">Print Ad</option>
			<option value="Other">Other</option>
			<option value="None">None</option>
			</select></td></tr>
<?php
global $mainframe;
$js_path = $mosConfig_live_site.'/spiffycal/';
$mainframe->addCustomHeadTag ('<script language="JavaScript" src="spiffyCal.js"></script>');
$mainframe->addCustomHeadTag ('<script language="javascript">
   var cal1=new ctlSpiffyCalendarBox("cal1", "frmTest", "txtDate","btnDate1","");
</script>');
$mainframe->addCustomHeadTag ('<link rel="stylesheet" type="text/css" href="http://www.teallake.com/spiffycal/spiffyCal.css">');
?>			
	<tr>
		<td colspan="2"><strong>Please tell us your proposed vacation date(s):</strong></td></tr>
	<tr>
			<td colspan="2">
				<table width="100%"><tr>
					<td width="30%"> <strong>Arrive:</strong></td>
					<td nowrap> 
<input type="text" name="Arrival" id="Arrival" value="" />
<SCRIPT language="JavaScript">cal1.writeControl();</SCRIPT>

					</td>
				</tr>
				<tr>
					<td><strong>Depart:</strong></td>
					<td nowrap>  
					<input type="text" name="Departure" id="Departure" value="" />
<SCRIPT language="JavaScript">cal1.writeControl();</SCRIPT>
					</td>
				</tr>
			</table>
		</td>
	</tr>

It doesn't show up in the browser, which can be seen here: http://www.teallake.com/index.php?option=com_chronocontact&chronoformname=reservations

If anyone can give me some ideas on how to get this working, I'd be really grateful!

Vicky Rowe
Satori Digital Marketing

Hi Vicky,

you need to add the scripts files references to the template of your website, code like this:

<?php
global $mainframe;
$js_path = $mosConfig_live_site.'/spiffycal/';
$mainframe->addCustomHeadTag ('<script language="JavaScript" src="spiffyCal.js"></script>');
$mainframe->addCustomHeadTag ('<script language="javascript">
   var cal1=new ctlSpiffyCalendarBox("cal1", "frmTest", "txtDate","btnDate1","");
</script>');
$mainframe->addCustomHeadTag ('<link rel="stylesheet" type="text/css" href="http://www.teallake.com/spiffycal/spiffyCal.css">');
?>  

will not work under Joomla 1.0.x

Cheers
Max

Hi Max,

Thanks for the input. I put the code into my template, and re-uploaded, still no joy, the calendars don't show. Should I also add php tags around the script references in the actual form as well? What prefix is needed to make the script reference run in the body?

The code that will be in the form is:

<SCRIPT language="JavaScript">cal1.writeControl();</SCRIPT>

::sigh:: I did have the Joomla calendar stuff in there, but it doesn't come up in a way that is easy to use, and this needs to be more like the airline reservation calendars, if possible.

Thanks again for your help!

Vicky Rowe
Satori Digital Marketing

Hi,

the files references in the template head, the JS code will be in the JS code box, like this one:

cal1.writeControl();

Max