SophiaKnows > Codebase > JavaScript

Source/Downloads

In General: This template enables a fully automated perpetual monthly calendar. The calendar can be easilly integrated as a control for an existing application or used as a simple screen ornament.

The calendar's automated CSS markup means designers can swap typeface, sizes, background and colors as well as resizing the calendar from 600 to 800 or 150 pixels width by changing just a handful of style statements.


<pre>
date_range = new Array("31"
   "28"
   "31"
   "30"
   "31"
   "30"
   "31"
   "30"
   "30"
   "31"
   "30"
   "31");
month_string = new Array("Jan"
  "Feb"
  "Mar"
  "Apr"
  "May"
  "Jun"
  "Jul"
  "Aug"
  "Sep"
  "Oct"
  "Nov"
  "Dec")

days = new Array("S","M","T","W","T","F","S")
today = new Date()
this_year = today.getFullYear()

now=today.getSeconds();

function set_calendar() {
  dateQuery=document.location.search.substring('1');
  if(dateQuery) {
    dateQueryArray=dateQuery.split('.')
    theQueryYear=dateQueryArray[0];theQueryMonth=dateQueryArray[1];
    } else {theQueryYear=this_year;theQueryMonth=today.getMonth();}
  return write_calendar(theQueryYear,theQueryMonth) 
  }

function write_calendar(Y,M) {
	if (Y % 4 == 0) { date_range[1] = 29 }
  the_max= parseInt(date_range[M])+1;
  the_first_date=eval("new Date("+Y+","+M+",1)");
  the_first_day = the_first_date.getDay();
  endpoint=((the_first_day>5)?43:36);
  if(the_first_day>4 && the_max>30) {endpoint=43;}
  calendar=ReturnHeading(Y,M);
  calendar+="<table id=calendar><tr>";
  calendar+=ReturnDayRows();
  calendar+="<\/tr><tr>";
  for (i=0; i < 7; i++) {
    if (i < the_first_day ) { 
      calendar+="<td class=dateSquare> <\/td>"; 
      }
    if (i == the_first_day) { 
      calendar+="<td class=dateSquare>1<\/td>"; 
      if (i!=0 && i % 7 == 0) { calendar+="\n<\/tr>\n<tr>\n"; }
      if (i == 6) { calendar+="\n<\/tr>\n<tr>\n"; }
      }
    }
  date_count = 2
  for (l=the_first_day + 2; l < endpoint; l++) {
    if (date_count < the_max) { 
      calendar+="<td class=dateSquare>"+ date_count + "<\/td>"; 
      }
    if (date_count >= the_max) { 
     calendar+="<td class=dateSquare> <\/td>";
     }
    if ( l== 7 || l % 7 == 0) { calendar+="\n<\/tr>\n<tr>\n";}
    date_count++
    }
  calendar+="<\/tr><\/table><\/div>";
  return calendar;
  }
// 1. SUB-ROUTINES: FUNCTIONS
function ReturnHeading(y,m) {
  heading="<table cellpadding=0 cellspacing=0 width=100%><tr>\n";
  heading+="<td width=30% align=center>";
  heading+="<a href="+ReturnBackString(y,m)+"class=vcrWhite>3<\/a><\/td>";
  heading+="<td width=40% align=center class=SansWhite14>";
  heading+=month_string[m].toUpperCase() + " " + y;
  heading+="<\/td>";
  heading+="<td width=30% align=center>";
  heading+="<a href="+ReturnNextString(y,m)+" class=vcrWhite>4<\/a><\/td>";
  heading+="<\/tr><\/table>\n";  
  return heading;
  }

// 2. RETURN DAY ROW
function ReturnDayRows() {
  daysrow="<tr>";
  for (c=0; c < 7; c++) {
    daysrow+="<td class=weekdaySquare><b>" + days[c] + "<\/td>";
    }
  daysrow+="<\/tr>";
  return daysrow;
  }

// 3. RETURN BACK STRING  
function ReturnBackString(y,m) {
  backString="?" + ((m > 0)? m+"."+(m-1) : (m-1)+".11");
  return backString;
  }

// 4. RETURN NEXT STRING
function ReturnNextString(y,m) {
  nextString="?" + ((m < 11)? y+"."+(parseInt(m)+1) : (parseInt(y)+1)+".0");
  return   nextString;
  }