Script: Basic Calendar issues in XHTML 1.0 DOCTYPE

**Fighterfox** · 12-02-2010, 11:29 PM

1) Script Title: Basic Calendar

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iccalendar.htm

3) Describe problem: I am using the Basic Calendar calendar script. Everything is working wonderfully, but I have resolved to write my webpage in the XHTML 1.0 Strict DOCTYPE. This calendar code has fallen short of the requirements in at least 20 instances. I have managed correcting most of the errors myself, but I am having a very difficult time with two issues. I am somewhat of a novice when it comes to JavaScript, so, although I understand the scripts themselves, I have little capability of manipulating the script itself.

FIRST BIG PROBLEM: XHTML 1.0 Strict does not allow JavaScript in the body, only in the head. The following is the body HTML and JavaScript code for the calendar (perhaps very slightly modified):

Code:

<form name="when">
<table>
  <tr>
    <td><input type="button" value="&lt;" onclick="Skip('-')" /></td>
    <td></td>
    <td>
      <select name="month" onchange="On_Month()">

        <script type="text/javascript">    <!-- ***I need to get this block of script out of the body section*** -->
        if (ie4||ns6){for (j=0;j<Month_Label.length;j++) {document.writeln('<option value=' + j + '>' + Month_Label[j]);}}
        </script>

      </select>
    </td>
    <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td>
    <td></td>
    <td><input type="button" value="&gt;" onClick="Skip('+')"></td>
  </tr>
</table>
</form>

I need to get the JavaScript out of the body and into the head section. Should I use a function, if so, how should I call it (what event to use)? Or are there other solutions?

SECOND BIG PROBLEM: XHTML 1.0 Strict does not allow the "name" attribute in a form tag. This occurs in the first line of my code. This is a problem, because the JS file that is loaded in the head section of my document refers to the form by its name in many instances. Here are two selected examples:

document.when.month.selectedIndex = Current_Month;
document.when.year.value = Current_Year;

I don't know how to identify the code in JavaScript by another method, but it seems to me that a different method may need to be used. What's the best way to do this? Also, I need to define the XHTML-mandated action="" attribute. Should I leave the attribute blank?

Sorry for the long post, and thanks in advance for any assistance.

**ddadmin** · 12-03-2010, 04:54 AM

Hmm are you sure you're referring to Basic Calender above? The code for it looks different compared to the snippet you posted above. Just based on Basic Calender, the following page validates as XHTML 1.0 for me:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>test</title>
<style type="text/css">

.main {
width:200px;
border:1px solid black;
}

.month {
background-color:black;
font:bold 12px verdana;
color:white;
}

.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}

.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}

.days #today{
font-weight: bold;
color: red;
}

</style>


<script type="text/javascript" src="basiccalendar.js">

/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/

var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year

document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));

/*]]>*/
</script>

</body>

</html>

The only thing I've added is the CDATA tag, though even that seems to be optional with the XHTML validator.

**jscheuer1** · 12-03-2010, 06:30 AM

I think you must mean:

Dynamic Calendar II

If so, I see what you mean. You can have a script in the body, just not inside a select element. I chose to write out the entire select.

I'm not sure of the logic on the name attribute on the form, but there's at least one workaround for that. I gave it an id instead and then referenced it in the script as such:

Code:

document.getElementById('when')

replacing 9 instances of:

Code:

document.when

There were a number of other issues with the script visa vis this DOCTYPE. But the rest were fairly easily solved. Here's what I came up with (works and validates as XHTML Strict):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/* <![CDATA[ */

/*
Dynamic Calendar II (By Jason Moon at http://www.jasonmoon.net)
Permission granted to Dynamicdrive.com to include script in archive
For this and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

var ns6=document.getElementById&&!document.all
var ie4=document.all

var Selected_Month;
var Selected_Year;
var Current_Date = new Date();
var Current_Month = Current_Date.getMonth();

var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var Month_Label = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var Current_Year = Current_Date.getYear();
if (Current_Year < 1000)
Current_Year+=1900


var Today = Current_Date.getDate();

function Header(Year, Month) {

   if (Month == 1) {
   Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
   }
   var Header_String = Month_Label[Month] + ' ' + Year;
   return Header_String;
}



function Make_Calendar(Year, Month) {
   var First_Date = new Date(Year, Month, 1);
   var Heading = Header(Year, Month);
   var First_Day = First_Date.getDay() + 1;
   if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) ||
       ((Days_in_Month[Month] == 30) && (First_Day == 7))) {
      var Rows = 6;
   }
   else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) {
      var Rows = 4;
   }
   else {
      var Rows = 5;
   }

   var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="C0C0C0" BORDERCOLORLIGHT="808080">';

   HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>';

   HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sun</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Mon</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Tue</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Wed</th>';

   HTML_String += '<th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Thu</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Fri</th><th ALIGN="CENTER" BGCOLOR="FFFFFF" BORDERCOLOR="000000">Sat</th></tr>';

   var Day_Counter = 1;
   var Loop_Counter = 1;
   for (var j = 1; j <= Rows; j++) {
      HTML_String += '<tr ALIGN="left" VALIGN="top">';
      for (var i = 1; i < 8; i++) {
         if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) {
            if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000"><strong><font color="red">' + Day_Counter + '</font></strong></td>';
            }
            else {
               HTML_String += '<td BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Day_Counter + '</td>';
            }
            Day_Counter++;    
         }
         else {
            HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>';
         }
         Loop_Counter++;
      }
      HTML_String += '</tr>';
   }
   HTML_String += '</table></td></tr></table>';
   cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
   cross_el.innerHTML = HTML_String;
}


function Check_Nums() {
   if ((event.keyCode < 48) || (event.keyCode > 57)) {
      return false;
   }
}



function On_Year() {
   var Year = document.getElementById('when').year.value;
   if (Year.length == 4) {
      Selected_Month = document.getElementById('when').month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
}

function On_Month() {
   var Year = document.getElementById('when').year.value;
   if (Year.length == 4) {
      Selected_Month = document.getElementById('when').month.selectedIndex;
      Selected_Year = Year;
      Make_Calendar(Selected_Year, Selected_Month);
   }
   else {
      alert('Please enter a valid year.');
      document.getElementById('when').year.focus();
   }
}


function Defaults() {
   if (!ie4&&!ns6)
   return
   var Mid_Screen = Math.round(document.body.clientWidth / 2);
   document.getElementById('when').month.selectedIndex = Current_Month;
   document.getElementById('when').year.value = Current_Year;
   Selected_Month = Current_Month;
   Selected_Year = Current_Year;
   Make_Calendar(Current_Year, Current_Month);
}


function Skip(Direction) {
   if (Direction == '+') {
      if (Selected_Month == 11) {
         Selected_Month = 0;
         Selected_Year++;
      }
      else {
         Selected_Month++;
      }
   }
   else {
      if (Selected_Month == 0) {
         Selected_Month = 11;
         Selected_Year--;
      }
      else {
         Selected_Month--;
      }
   }
   Make_Calendar(Selected_Year, Selected_Month);
   document.getElementById('when').month.selectedIndex = Selected_Month;
   document.getElementById('when').year.value = Selected_Year;
}

/* ]]> */
</script>
</head>
<body onload="Defaults();">
<div id="NavBar" style="position:relative;width:286px;top:5px;text-align:left;">
<form id="when" action="#">
<table>
<tr>
   <td><input type="button" value="&lt;-- Last" onclick="Skip('-')" /></td>
   <td> </td>
   <td>
<script type="text/javascript">
/* <![CDATA[ */
if (ie4||ns6){
   document.writeln('<select name="month" onchange="On_Month()">');
   for (j=0;j<Month_Label.length;j++) {
      document.writeln('<option value=' + j + '>' + Month_Label[j]);
   }
   document.writeln('</select>');
}
/* ]]> */
</script>
   </td>
   <td><input type="text" name="year" size="4" maxlength="4" onkeypress="return Check_Nums()" onkeyup="On_Year()" /></td>
   <td> </td>
   <td><input type="button" value="Next --&gt;" onclick="Skip('+')" /></td>
</tr></table></form></div>
<div id="Calendar" style="position:relative;width:238px;top:-2px;text-align:left;"></div>
</body>
</html>

**Fighterfox** · 12-03-2010, 12:18 PM

Your solutions work very well, and they answer all my questions. Thank you very much!

Thread: Script: Basic Calendar issues in XHTML 1.0 DOCTYPE

Thread Tools

Search Thread

Script: Basic Calendar issues in XHTML 1.0 DOCTYPE

The Following User Says Thank You to jscheuer1 For This Useful Post:

Resolved

Bookmarks

Bookmarks

Posting Permissions