Related items

Calendars- source2

You are here: irt.org | Articles | JavaScript | Date and Time | Calendars [ next ]
Published on: Sunday 1st December 1996 By: Martin Webb
cal.htm source code

<head>

<title>Popup Calendar</title>

</head>

<body bgcolor="#C0C0C0" topmargin="2" leftmargin="5">

<center>
<script language="JavaScript"><!--
function Calendar(Month,Year) {
  var output =
    '<form name="cal"><table bgcolor="#C0C0C0"><tr><td align=left>' +
    '<font color="#0000BB" face="Arial" size="+1">' +
    names[parent.month] + " " + parent.year +
    '</font></td><td width="50%" align="right">' +
    '<select name="Month" onChange="changeMonth()">';

  for (month=0; month<12; month++) {
    if (month == parent.month)
      output +=
        '<option value="' + month + '" selected>' +
        names[month] + '</option>';
    else
      output +=
        '<option value="' + month + '">' +
        names[month] + '</option>';
  }

  output +=
    '</select>' +
    '<select name="Year" onChange="changeYear()">';

  for (year=1900; year<2101; year++) {
    if (year == parent.year)
      output +=
        '<option value="' + year + '" selected>' +
        year + '</option>';
    else
      output += '<option value="' + year + '">' +
      year + '</option>';
  }

  output +=
    '</select></td></tr><tr><td align="center" colspan="2">';

  firstDay = new Date(Year,Month,1);
  startDay = firstDay.getDay();

  if (((Year % 4 == 0) &&
     (Year % 100 != 0)) ||
     (Year % 400 == 0))
    days[1] = 29; 
  else
    days[1] = 28;

  output +=
    '<table callspacing="0" cellpadding="0" border="1" ' +
    'bordercolordark="#FFFFFF" bordercolorlight="#C0C0C0"><tr>';

  for (i=0; i<7; i++) {
    output +=
      '<td width="50" align="center" valign="middle">' +
      '<font size="-1" color="#000000" face="Arial"><b>' +
      dow[i] + '</b></font></td>';
  }

  output += '</tr><tr align="center" valign="middle">';

  var column = 0;
  var lastMonth = Month - 1;
  if (lastMonth == -1) lastMonth = 11;

  for (i=0; i<startDay; i++) {
    output +=
      '<td width="50" height="30">' +
      '<font size="-1" color="#808080" face="Arial">' +
      (days[lastMonth]-startDay+i+1) + '</font></td>';
    column++;
  }

  for (i=1; i<=days[Month]; i++) {
    if ((i == thisDay)  && (Month == thisMonth) && (Year == thisYear))
      output +=
        '<td width="50" height="30" bgcolor="#FFFFFF" ' +
        'bordercolordark="#000000" bordercolorlight="#C0C0C0">' +
        '<font size="-1" color="#ff0000" face="Arial">' +
        i + '</font></td>';
    else
      output +=
        '<td width="50" height="30">' +
        '<font size="-1" color="#0000BB" face="Arial">' +
        i + '</font></td>';

    column++;

    if (column == 7) {
      output += '</tr><tr align="center" valign="middle">';
      column = 0;
    }
  }

  if (column > 0) {
    for (i=1; column<7; i++) {
      output +=
        '<td width="50" height="30">' + 
        '<font size="-1" color="#808080" face="Arial">' +
        i + '</font></td>';
      column++;
    }
  }
  output +=
    '</tr></table>' +
    '</form></td></tr></table>';
     
  return output;
}

function array(
  m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11
) {
  this[0]  = m0;  this[1]  = m1;
  this[2]  = m2;  this[3]  = m3;
  this[4]  = m4;  this[5]  = m5;
  this[6]  = m6;  this[7]  = m7;
  this[8]  = m8;  this[9]  = m9;
  this[10] = m10; this[11] = m11;
}

function changeMonth () {
  if (
    document.Cal.Month.options[
      document.Cal.Month.selectedIndex
    ].value != '') {
    parent.month =
      document.Cal.Month.options[
        document.Cal.Month.selectedIndex
      ].value;
    location.href = 'cal.htm';
  }
}

function changeYear () {
  if (
    document.Cal.Year.options[
      document.Cal.Year.selectedIndex
    ].value != '') {
    parent.year =
      document.Cal.Year.options[
        document.Cal.Year.selectedIndex
      ].value;
    location.href = 'cal.htm';
  }
}

function y2k(number) {
  return (number < 1000) ? number + 1900 : number;
}
//--></script>

<center>
<script language="JavaScript"><!--
var names =
  new array(
    'January','February','March','April','May','June',
    'July','August','September','October','November','December'
  );

var days =
  new array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var dow =
  new array('Sun','Mon','Tue','Wed','Thu','Fri','Sat','','','','','');

var today     = new Date();
var thisDay   = today.getDate();
var thisMonth = today.getMonth();
var thisYear  = y2k(today.getYear());

document.write(Calendar(parent.month,parent.year));
//--></script>
</center>

</body>

</html>
Related items

Born on the 4th of July
The Chinese New Year
What sign are you?
Monday's child is full of grace
32 years 8 months 24 days
Blind Date
Travelling Through Time
Time of Day
Date Spinner