Demo Dynamic HTML - Calendario

Calendario

Compatibilidad: Ms Internet Explorer

Un calendario dinámico de los últimos 5 años que permite ver todos los meses del año.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<STYLE TYPE="text/css">
         .today {color:navy; font-weight:bold}
         .days {font-weight:bold}
      </STYLE>

<SCRIPT LANGUAGE="JavaScript">
         // Initialize arrays.
         var months = new Array("Gennaio", "Febbraio", "Marzo",
            "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre",
            "Ottobre", "Novembre", "Dicembre");
         var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
            30, 31, 30, 31);
         var days = new Array("dom", "Lun", "Mar",
            "Mer", "Gio", "Ven", "Sab");

function getDays(month, year) {
            // Test for leap year when February is selected.
            if (1 == month)
               return ((0 == year % 4) && (0 != (year % 100))) ||
                  (0 == year % 400) ? 29 : 28;
            else
               return daysInMonth[month];
         }

function getToday() {
            // Generate today's date.
            this.now = new Date();
            this.year = this.now.getYear() + 1900; // Returned relative
                                                   // to 1900
            this.month = this.now.getMonth();
            this.day = this.now.getDate();
         }

// Start with a calendar for today.
         today = new getToday();

function newCalendar() {
            today = new getToday();
            var parseYear = parseInt(document.all.year
               [document.all.year.selectedIndex].text) - 1900;
            var newCal = new Date(parseYear,
               document.all.month.selectedIndex, 1);
            var day = -1;
            var startDay = newCal.getDay();
            var daily = 0;
            if ((today.year == newCal.getYear() + 1900) &&
                  (today.month == newCal.getMonth()))
               day = today.day;
            // Cache the calendar table's tBody section, dayList.
            var tableCal = document.all.calendar.tBodies.dayList;
            var intDaysInMonth =
               getDays(newCal.getMonth(), newCal.getYear() + 1900);
            for (var intWeek = 0; intWeek < tableCal.rows.length;
                  intWeek++)
               for (var intDay = 0;
                     intDay < tableCal.rows[intWeek].cells.length;
                     intDay++) {
                  var cell = tableCal.rows[intWeek].cells[intDay];

// Start counting days.
                  if ((intDay == startDay) && (0 == daily))
                     daily = 1;

// Highlight the current day.
                  cell.className = (day == daily) ? "today" : "";

// Output the day number into the cell.
                  if ((daily > 0) && (daily <= intDaysInMonth))
                     cell.innerText = daily++;
                  else
                     cell.innerText = "";
               }
         }

function getDate() {
            // This code executes when the user clicks on a day
            // in the calendar.
            if ("TD" == event.srcElement.tagName)
               // Test whether day is valid.
               if ("" != event.srcElement.innerText)
                  alert(event.srcElement.innerText);
         }
      </SCRIPT>

</HEAD>

<TABLE ID="calendar">
         <THEAD>
            <TR>
               <TD COLSPAN=7 ALIGN=CENTER>
                  
                  <SELECT ID="month" ONCHANGE="newCalendar()">
                     <SCRIPT LANGUAGE="JavaScript">
                        // Output months into the document.
                        // Select current month.
                        for (var intLoop = 0; intLoop < months.length;
                              intLoop++)
                           document.write("<OPTION " +
                              (today.month == intLoop ?
                                 "Selected" : "") + ">" +
                              months[intLoop]);
                     </SCRIPT>
                  </SELECT>

<SELECT ID="year" ONCHANGE="newCalendar()">
                     <SCRIPT LANGUAGE="JavaScript">
                        // Output years into the document.
                        // Select current year.
                        for (var intLoop = 1995; intLoop < 2000;
                              intLoop++)
                           document.write("<OPTION " +
                              (today.year == intLoop ?
                                 "Selected" : "") + ">" +
                              intLoop);
                     </SCRIPT>
                  </SELECT>
               </TD>
            </TR>
            <TR CLASS="days">
               
               <SCRIPT LANGUAGE="JavaScript">
                  // Output days.
                  for (var intLoop = 0; intLoop < days.length;
                        intLoop++)
                     document.write("<TD>" + days[intLoop] + "</TD>");
               </SCRIPT>
            </TR>
         </THEAD>
         <TBODY ID="dayList"ALIGN=CENTER ONCLICK="getDate()">
            
            <SCRIPT LANGUAGE="JavaScript">
               for (var intWeeks = 0; intWeeks < 6; intWeeks++) {
                  document.write("<TR>");
                  for (var intDays = 0; intDays < days.length;
                        intDays++)
                     document.write("<TD></TD>");
                  document.write("</TR>");
               }
            </SCRIPT>
         </TBODY>
      </TABLE>

</body>
</html>