PDA

View Full Version : Resolved 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/dynamicindex7/basiccalendar.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):


<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 (http://www.dynamicdrive.com/dynamicindex7/basiccalendar.htm) 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:


<!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 (http://www.dynamicdrive.com/style/blog/entry/updating-a-javascript-to-be-xhtml-compliant/), though even that seems to be optional with the XHTML validator (http://validator.w3.org/).

jscheuer1
12-03-2010, 06:30 AM
I think you must mean:

Dynamic Calendar II (http://www.dynamicdrive.com/dynamicindex6/dcalendar2.htm)

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:


document.getElementById('when')

replacing 9 instances of:


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


<!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!:)