Results 1 to 4 of 4

Thread: Script: Basic Calendar issues in XHTML 1.0 DOCTYPE

  1. #1
    Join Date
    Nov 2010
    Posts
    28
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Script: Basic Calendar issues in XHTML 1.0 DOCTYPE

    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.
    Last edited by jscheuer1; 12-03-2010 at 05:27 AM. Reason: format code

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  3. #3
    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

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

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

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

    Fighterfox (12-03-2010)

  5. #4
    Join Date
    Nov 2010
    Posts
    28
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Thumbs up Resolved

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

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
  •