JavaScript - Complex Javascript/xml Calendar Function

hi there

i'm a newb so be nice lol

--> I want to use javascript in an array to submit content.
I have some php background so using some techniques I worked this out.

>> I need to select bathroom details and the script needs to be user friendly,
however I have multiple bathrooms that can be selected. So based on a drop down list
I need to select the bathrooms needed and then I will get more options as stated below.

These options will need to be submitted so I need different varibles for each item selected




I expect that you'll have a better way to do it I just want it to work

my HTML script LOOKED as follows



Code:

    <!-- BATHROOM TYPE SELECTOR  HTML-->
    <label>
      <input name="fullbathr" type="checkbox" value="fullbathr" onClick="checker('yesFullba'); UpdateChecks('option');" />
      Full Bathroom </label>
    <span id="yesFullba" style="visibility:visible"> 
      | 
      <input name="babath" type="checkbox" value="babath" id="babath" onClick="change('bathselba'); UpdateChecks('option');";/>
      Bath </label>
      | 
      <input name="bashower" type="checkbox" value="bashower" id="bashower" onClick="change('showerselba'); UpdateChecks('option');" />
      Shower </label>
   <span id="bathselba" style="visibility:hidden"> 
          <br /> Bath Type: <label>
        <input type="radio" name="bathtype" value="standardba" id="bathtype_0" />
        Standard</label>
      <label>
        <input type="radio" name="bathtype" value="ovalba" id="bathtype_1" />
       | Oval</label>
      <label>
        <input type="radio" name="bathtype" value="cornerba" id="bathtype_2" />
       | Corner</label>

      <label>
        <input type="radio" name="bathtype" value="spaba" id="bathtype_3" />
       | Spa</label>
   </span>
 
     <span id="showerselba" style="visibility:hidden"> 
     <br /> Shower Heads: <label>
        <input type="radio" name="showerheadba" value="singlesho" id="showerheadba_0" />
        Single Head</label>
      <label>
        <input type="radio" name="showerheadba" value="doublesho" id="showerheadba_1" />
       | Double Head</label> </span>
    </span>
    <br />
    <!-- end BATHROOM TYPE SELECTOR HTML  -->

i converted it as follows

Code:

<!--  CREATE BATHROOMS  -->
function createbaths(number2) {
databaths = "";    
inter = "'";
dinter = '"';
spaces="      ";
if (number2 < 7 && number2 > -1) {
for (i=1; i <= number2; i++) {
databaths = databaths + "<br><strong>Bathroom " + i + " :</strong><br>"
    
    <!-- BATHROOM TYPE SELECTOR  JAVASCRIPT-->
+ " <label>"
+ " <input name=" + dinter + "fullbathr" + dinter 
+ " type=" + dinter + "checkbox" + dinter 
+ " value=" + dinter + "fullbathr" + dinter 
+ " onClick=" + dinter + "checker(" + inter + "yesFullba" + inter + "); " 
+ "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />" 
+ "Full Bathroom </label>" + "<span id=" + dinter + "yesFullba" + dinter 
+ " style=" + dinter + "visibility:visible" + dinter + "> | "

     + "<input name=" + dinter + "babath" + dinter 
	 + " type=" + dinter + "checkbox" + dinter 
	 + " value=" + dinter + "babath" + dinter 
	 + " id=" + dinter + "babath" + dinter 
	 + " onClick=" + dinter 
	 + "change(" + inter + "bathselba" + inter + "); " 
	 + "UpdateChecks(" + inter + "option" + inter + ");" 
	 + dinter + ";/>" 
	 + "Bath </label> | "
	 
	 + "<input name=" + dinter + "bashower" + dinter 
	 + " type=" + dinter + "checkbox" + dinter 
	 + " value=" + dinter + "bashower" + dinter 
	 + " id=" + dinter + "bashower" + dinter 
	 + " onClick=" + dinter 
	 + "change(" + inter + "showerselba" + inter + "); " 
	 + "UpdateChecks(" + inter + "option" + inter + ");" 
	 + dinter + " />" 
	 + "Shower </label> "
	 
+ "<span id=" + dinter + "bathselba" + dinter 
+ " style=" + dinter + "visibility:hidden" + dinter + ">" + "<br />"
	  
     + "Bath Type: <label>" 
	 
	 + "<input type=" + dinter + "radio" + dinter 
	 + " name=" + dinter + "bathtype" + dinter 
	 + " value=" + dinter + "standardba" + dinter 
	 + " id=" + dinter + "bathtype_0"  + dinter 
	 + " /> " 
	 + "Standard</label>"
	 
	+ "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "bathtype" + dinter 
	+ " value=" + dinter + "ovalba" + dinter 
	+ " id=" + dinter + "bathtype_1" + dinter 
	+ " /> | "
	+ "Oval</label>"
	
    + "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "bathtype" + dinter 
	+ " value=" + dinter + "cornerba" + dinter 
	+ " id=" + dinter + "bathtype_2" + dinter 
	+ " /> | "
	+ "Corner</label>"

    + "<label>"
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name="+ dinter + "bathtype" + dinter 
	+ " value=" + dinter + "spaba" + dinter 
	+ " id=" + dinter + "bathtype_3" + dinter 
	+ " /> | "
	+ "Spa</label></span>"
	 
 
+ " <span id=" + dinter + "showerselba" + dinter 
+ " style=" + dinter + "visibility:hidden" + dinter 
+ "><br />"
	
	+ " Shower Heads: <label>"
	
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "showerheadba" + dinter 
	+ " value=" + dinter + "singlesho" + dinter 
	+ " id=" + dinter + "showerheadba_0" + dinter 
	+ " />" 
	+ "Single Head</label>" 
	
	+ "<label>" 
	+ "<input type=" + dinter + "radio" + dinter 
	+ " name=" + dinter + "showerheadba" + dinter 
	+ " value=" + dinter + "doublesho" + dinter 
	+ " id=" + dinter + "showerheadba_1" + dinter 
	+ " /> | " 
	+ "Double Head</label>"
	+ " </span> </span> <br /> " 

    <!-- end BATHROOM TYPE SELECTOR JAVASCRIPT -->

The entire forum is using a few different functions I've setup for this section i've got these sets

Code:

<!-- --> 
function change(id){
	if (document.all[ id ].style.visibility == 'hidden') 
	{    
	document.all[ id ].style.visibility = 'visible'; 
    document.all[ id ].focus(); 
	}	
else
	{
	document.all[ id ].style.visibility = 'hidden'; 
    document.all[ id ].value = '';
	document.all[ id ].checked = '';
	}
}
<!-- --> 

<!-- for full bathroom selector-->
function UpdateChecks(which) {
if     (which == 'fullBathroom')    { fullBathroomIsChecked();  }
else if(which == 'option')  { BoxesCheck();    }
}
function fullBathroomIsChecked() {
if(document.all.fullbathr.checked == false) { BoxesCheck(); }
else {
	document.all.babath.checked = false;
	document.all.bashower.checked = false;
	}
}
function BoxesCheck() {
document.all.fullbathr.checked = false;
if((document.all.babath.checked == true) && (document.all.bashower.checked == true)) 
	{
	document.all.fullbathr.checked = true;
	document.all.yesFullba.style.visibility = 'hidden'; 
	fullBathroomIsChecked();
	}
}
<!--  for full bathroom selector END -->

CURRENTLY
I have a drop down list from 1 to 6 when a bathroom is selected lets say 3
then it SHOULD display
full - bath - shower -
PER EACH BATHROOM

if bath and shower is selected they disappear and full remains ticked if u tick full bath and shower
disappear. included a sub cat. that changes based on the above selection this works in html but


The bathroom varibles in the javascript need to be changed to suite a changing varible I based
what I understand that an array will need to be added but how to i adjust the script correctly.

I might work it out just have a bit of overload at the moment.

Thanks in advance

Hi,
I want to build a custom calendar using javascript.
On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month.
There are 3 button below the calendar as prev mnth,create schedule,next mnth.
when prev is clicked it should works same as on load for previous month, similarly for next mnth.

Pls help its urgent.

Thanks

Hello friends...
i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page.
In registration page to register the portal the birth date of user is required .
so i have added the calendar control using javascript.
I want that whenever user clicks on the calendar the birth date is displayed in the textfield.
but it cannot displayed the birth date...
So please tell me the sloution...

following is the code for calendar control

<p>
<meta content="text/html;" http-equiv="Content-Type" />
<style type="text/css">
#calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; }
#calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; }
#calenderTableHead TR { background-color: #5FB404; }
#calenderTableDays TR { background-color: #B40404; color: #E6E6E6; }
.normalDay { border: 1px dotted black; cursor: pointer; }
.hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; }
.toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; }
.choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; }
</style>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script language="javaScript" type="text/javascript" src="calendar.js">
// Array of max days in month in a year and in a leap year
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
/* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];
return monthMaxDaysLeap[month];
}
else return monthMaxDays[month];
}

function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)
// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear; var month = curMonth;
}
var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length; i++)
{
if (document.getElementById('selectYear').options[i].value == year)
{
document.getElementById('selectYear').selectedIndex = i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;

// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();
continu = true;
firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild(document.createElement("TD")); x++;
}
}
firstRow = false; var d = 1;
}

if (x % 7 == 0)
{
ti++; trs[ti] = document.createElement("TR");
}
if (day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false; var styleClass = 'normalDay'; var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass; if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
if (targetEl)
td.onclick = new Function('pickDate('+year+', '+month+', '+d+')');
else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td); x++; d++;
}
return trs;
}

function showCalender(elPos, tgtEl)
{
targetEl = false;
if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';
calTable.style.display='block';
var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}
hideSelect(document.body, 1);
}

function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy) startYear = curYear;
if (ey) endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100) { return; }
var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions);
// nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;
if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) )
{
hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none';
}
}
}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}

function highLiteDay(el) { el.className = 'hlDay'; }
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay') el.className = 'toDay';
else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay';
else el.className = 'normalDay';
}

function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= day+'-'+month+'-'+year; closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions;
}
</script>
<link rel="stylesheet" type="text/css" href="calendar.css" /></p>
<form>
<input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&amp;groupId=10136&amp;t=1294233035464" /></a>
</form>
<!-- Calender Script -->
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));">
<option value="0" selected="selected">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select></td>
<td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td>
<td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
</tbody>
<tbody id="calender">
</tbody>
</table>
<!-- End Calender Script -->

Thanking you...

Hello Friends...
I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration.
So in the patient registration page i want to add the calendar control the requirement is
whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format..
So please tell me the answer...

Thanking you.....
Umesh

how to create a customizable event based calender

i need to create a grid calender

where user can edit the fields of the dates and he can block some dates !

is it possible please help to me

i hope u will help to me

thanking you

reply soon