HOME PAGE - Beispiele, Kalender Java-Scripts US-Norm und Euro-Norm -

Path: Home / Home Page / Beispiele / Java-Script
Kalender US-Euro:
Quelltext
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Doug Lawson (dlawson@clark.net) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var calStartDOW = 0;
var holidays = new Array();
holidays["1 Jan 2000"] = true;
holidays["17Jan 2000"] = true;
holidays["21 Feb 2000"] = true;
holidays["21 Apr 2000"] = true;
holidays["29 May 2000"] = true;
holidays["3 Jul 2000"] = true;
holidays["4 Jul 2000"] = true;
holidays["4 Sep 2000"] = true;
holidays["10 Nov 2000"] = true;
holidays["23 Nov 2000"] = true;
holidays["24 Nov 2000"] = true;
holidays["25 Dec 2000"] = true;
holidays["31 Dec 2000"] = true;
////////////////////////////////////////////////
// ABBREVIATED MONTH NAMES
// months[] is used internally for (among other things) compatibility with 
// javascript Date.parse() methods.  You should only have to change it if 
// your language variable changes. 
var months = new Array( "Jan","Feb","Mar", "Apr","May","Jun", "Jul","Aug","Sep","Oct", "Nov", "Dec");
///////////////////////////////////////////////
// Long month names 
// longmonths is used for calendar titles. They don't have to be long, 
// just whatever you would like to display 
// 
var longmonths = new Array( "January", "Februar", "Maerz",
									 "April", "Mai", "Juni",
									 "Juli", "August", "September",
									 "Oktober", "November", "Dezember" ); 

var leapdays = new Array(31,29,31, 30,31,30, 31,31,30, 31,30,31); 
var yeardays = new Array(31,28,31, 30,31,30, 31,31,30, 31,30,31); 
//////////////////////////////////////////////// 
// the symbols to use at the top of the calendars
var dow = new Array("S","M","D","M","D","F","S"); 
// globalCalWidth is the default width for calendar tables
var globalCalWidth = "95%"; 
// colors
// changing colors here is a lot easier than slogging through the code 
//
// actually, it would be better to do all this with classes and style sheets 
// but we want to support some older browsers 
var colorWhite = "#FFFFFF"; 
var colorDarkRed = "#800000";
var colorMedRed  = "#B00000"; 
var colorLightGrey = "#E0E0E0"; 
var colorMedGray = "#808080"; 
var colorOffWhite = "#F8F8F8"; 
var colorDkBlue   = "#0000E0"; 
// colors for various parts of the calendars
var holidayColor = colorMedRed;     // fg color for weekends and holidays 
var dowBGColor   = colorLightGrey;  // bg for days of week at top of calendar
var dowFGColor   = colorDkBlue;     // fg for days of week 
var calHdrBGColor = colorMedGray;   // bg for month and year
var calHdrFGColor = colorOffWhite;  // fg for month and year
//////////////////////////////////////////////////////////////////
// a global date object to speed things up a little, since 
// there are lots of places where we need today's date
var myDate = new Date(); 
////////////////////////////////////////////////////////////////
// thisMonth and thisYear are used as static vars for 
// newCalendars() (for persistence between calls, which may 
// or may not involve reloading the document) 
// 
// whether these are important or not depends on how you
// handle the PREVIOUS and NEXT buttons. If you reload the 
// script from the server using GET, you won't use these variables. 
// 
// if you want to cahnge the target so that going backward or 
// forward does not require a reload, then you will be setting these
// from the buttons, probably best done with a handler for onClick()
var thisMonth = myDate.getMonth(); 
var thisYear  = myDate.getFullYear(); 
// Now, figure out the arguments the page was loaded with 
// and what they mean
//
// you won't need the next four lines if you don't use GET for
// the PREVIOUS and NEXT features. Comment them out 
// if that is the case 
var URLargs = getURLArgs(true); 
if (URLargs.year)    { thisYear = parseInt(URLargs.year);            } 
if (URLargs.month)   { thisMonth = (parseInt(URLargs.month)%12);     } 
if (URLargs.starton) { calStartDOW = (parseInt(URLargs.starton)%7);  }
function isLeapYear( year ){
  // is it leap year ? returns a boolean
  return ( (0 == (year%4)) && ( (0 != (year%100)) || (0 == (year%400)))); 
  // ie, if the year divides by 4, but not by 100 except when it divides by
  // 400, it is leap year
} 
function isValidDayOfMonth( day, month, year) 
{ 
  // determines whether a day is valid 
  // (ie, prevents Feb 30 from being processed) 
  // ( not used but left here for other pages that use 
  // this calendar, like the time-off request form ) 
  // 
  if (day <= 0) { return false; }
  if (isLeapYear(year)) { return (day <= leapdays[month])}
  return ( day <= yeardays[month]); 
} 
function canonicalDate(day, month, year) 
{ 
  // return the number of days since the Jan 0 2000 (ie, 1/1/2K returns 1, 31/12/1999 returns 0) 
  // for days before Jan 1 2000, returns negative numbers
  var canonDate = 0;
  // if the function had no arguments, use today's date; 
  var mday = myDate.getDate(); 
  var mmon = myDate.getMonth(); 
  var myr  = myDate.getFullYear(); 
  if( arguments.length > 0 ) 	 { mday = arguments[0];	 } 
  if( arguments.length > 1 ) 	 { mmon = arguments[1];	 } 
  if( arguments.length > 2 ) 	 { myr  = arguments[2];	 } 
 if(myr >= 2000) 
	{ canonDate += mday; 
	  while(mmon > 0)  { canonDate += isLeapYear(myr) ? leapdays[mmon]: yeardays[mmon]; mmon--;} 
	  while(myr > 2000){ canonDate += isLeapYear(myr) ? 366: 365; myr--;  } 
	} 
 else
	{ canonDate -= isLeapYear(myr) ? leapdays[mmon] - mday: yeardays[mmon] - mday; 
	  while(mmon < 11)  { mmon++; canonDate -= isLeapYear(myr) ? leapdays[mmon]: yeardays[mmon];} 
	  while(myr < 1999){ myr++; canonDate -= isLeapYear(myr) ? 366: 365;} 
	} 
 return canonDate; 
} 
function dateDiff(firstDate, secondDate) 
{ 
  // returns the result in days of subtracting firstDate from secondDate. Result is 
  // negative if secondDate came before firstDate. 
  var days= ( canonicalDate(secondDate.getDate(), secondDate.getMonth(), secondDate.getFullYear()) -  
				  canonicalDate(firstDate.getDate(), firstDate.getMonth(), firstDate.getFullYear())); 
  return days; 
} 
function shiftArray(myArray) 
{ 
  // since Array.shift() is missing or broken on some versions of MSIE
  // we fake it here. 
  if(-1 != navigator.appVersion.indexOf("MSIE")) 		{ 
	 var myVal = myArray[0];
	 for(i=0; i<(myArray.length -1); i++)
		{ myArray[i] = myArray[i+1];}
	 myArray.length = myArray.length -1; 
	 return myVal; 		} 
	 else return myArray.shift(); 
} 
function isHoliday(year,mon,mday)
{ 
  // it the date on the list? 
  // the format is a little sensitive, you
  // have to make sure that 'mon' is
  // something that Date.parse() can 
  // understand 
  var dStr = mday + " " + mon + " " + year; 
  if(holidays[dStr]) { return true; } 
  return false; 
} 
function isWeekend( year, mon, mday) 
{ 
  var mDate = new Date(mday + " " + mon + " " + year); 
  return ( ( 0 == mDate.getDay())  ||  ( 6 == mDate.getDay()  )); 
} 
function calculateWorkDays( startDate, endDate) 
{ 
  // called with 2 Date Objects as arguments. 
  // calculates the number of workdays between two dates by adding up the 
  // number of days and subtracting weekends and holidays. 
  var myEndDate = canonicalDate(endDate.getDate(), endDate.getMonth(), endDate.getFullYear()); 
  var counter = 0; 
  var mDay = startDate.getDate(); 
  var mMonth = startDate.getMonth(); 
  var mYear  = startDate.getFullYear(); 
  while  (canonicalDate(mDay, mMonth, mYear) <= myEndDate)
    { 
		if(! ( isHoliday(mYear,months[mMonth],mDay) ||	 isWeekend(mYear,months[mMonth],mDay)) ) 
		{ counter++; } 

      // increment the date
      // are we at the end of a month ? 
      var omDay = mDay;
      var omMonth = mMonth; 
      var omYear = mYear; 
      mDay = isLeapYear(mYear) ? 
		  ((mDay >= leapdays[mMonth]) ? 1 : mDay+1):
		  ((mDay >= yeardays[mMonth]) ? 1 : mDay+1);
      // do we need to increment the month ? 
      mMonth = (mDay == 1) ?  (mMonth +1) % 12: mMonth; 
      // do we need to increment the year? 
      mYear = ( (mDay == 1) && (mMonth == 0)) ? mYear + 1: mYear;
      // startDate = new Date(mDay, mMonth, mYear); 
    }
  return counter; 
} 
function writeCalendar(target, myYear, myMonth, sday, eday)
{ 
  // writes a calendar to target  for myMonth myYear. 
  // sday and eday are optional values indicating the range of dates 
  // to be set in bold. 
  // get a new date for the first day of the month the user is looking at
  var calDate = new Date( myYear,  myMonth, 1, 0,0,0,0 ); 
  // how many days are in the month ? 
  var mDays = isLeapYear(myYear) ? leapdays[myMonth]: yeardays[myMonth]; 
  var i = 0; 
  // what day of the week does the month start on? 
  var wkDay = calDate.getDay(); 
  var dateBgAtt = ""; 
  var dateFontTag = "";
  var fontCloseTag = ""; 
  var boldTag = "";
  var unBoldTag = ""; 
  // if the function was called with the sday and eday arguments, then the 
  // caller wants a range of dates written in bold 
  var useBold = arguments.length >= 5 ? true: false; 
  // write the header for the calendar ( month and year ) 
  target.write("<CENTER>\n<TABLE BORDER='0' CELLPADDING='6' CELLSPACING='0' WIDTH=\"80%\">\n");
  // set the background color in the TR tag
  target.write("<TR BGCOLOR=\"", calHdrBGColor,  "\">");
  // set the FG color using a FONT tag, better would be style sheets 
  target.write(
					"<TD COLSPAN='5'><FONT COLOR=\"", calHdrFGColor,  "\"><STRONG>",
					longmonths[myMonth],
					"</STRONG></FONT></TD>","<TD COLSPAN='2'><FONT COLOR=\"", calHdrFGColor,  "\"><STRONG>", 	
					myYear, 
					"</STRONG></FONT></TD></TR>\n"
					); 
  // write the abbreviations for days of the week into the top line of the calendar
  target.write("<TR BGCOLOR=\"", dowBGColor, "\">"); 
  for(i=0; i< 7; i++) 
	 { target.write("<TD><FONT COLOR=\"", dowFGColor,   
						 "\">", dow[((i+calStartDOW)%7)], 
						 "</FONT></TD>");}
  target.write("</TR>\n");
  // start the first line with blank spaces until we get to the first day of the month
  target.write("<TR ALIGN='RIGHT'>"); 
  for(i=0 ; i < ((7 - calStartDOW + wkDay)%7); i++) 
	 { target.write("<TD> </TD>");	 }
  // since javascript doesn't do modulus on negative numbers, 
  // add 7 to anything that might be negative
  var cmdate = i - ((7 - calStartDOW + wkDay)%7); 
  // write the weekdays
  for( i=i; cmdate < mDays ; i++) 
	 {  
		// what is the date ? 
		cmdate++; 
	   // if we have reached the end of a week, start another one
		if(0 == (i%7)){ target.write("</TR>\n<TR ALIGN='RIGHT'>"); } 
		// if the date is a holiday or weekend, set it in color
		if( (isHoliday(calDate.getFullYear(),months[calDate.getMonth()],cmdate))
		    || (isWeekend(calDate.getFullYear(),months[calDate.getMonth()],cmdate)) )
		  { 	 
			 dateBgAtt = ""; 
			 dateFontTag = "<FONT COLOR=\"" +  holidayColor +  "\">";
			 fontCloseTag = "</FONT>"; 		  }
		else  
		  {	 dateBgAtt = ""; 
			 dateFontTag = "";
			 fontCloseTag = "";   		  } 

		// set the days off in bold
		if( ( useBold )  && (cmdate >= sday) && (cmdate <= eday))
		  { 	 boldTag = "<STRONG><EM>"; 
			 unBoldTag = "</EM></STRONG>"; } 
		else  { 
			 boldTag = ""; 
			 unBoldTag = "";   } 
		target.write("<TD ", dateBgAtt, " >", dateFontTag, boldTag, cmdate, unBoldTag, fontCloseTag, "</TD>");
	 }
  while(0 != (i%7)) { 	target.write("<TD>   </TD>"); i++; }
  target.write("</TR>"); 
  target.write("</TABLE></CENTER>\n"); 
} 
function drawCalendar( ourTarget, ourYear, ourMonth, startDay, endDay)
{
  var myMonth = myDate.getMonth(); 
  var myYear  = myDate.getFullYear(); 
  var target = document; 
  // strictly speaking, all the arguments are optional. 
  // if you only want this month's calendar, called drawCalendar() with no args. 
  if(arguments.length >= 1) { target = ourTarget; }
  if(arguments.length >= 2) { myYear = ourYear; } 
  if(arguments.length >= 3) { myMonth = ourMonth; } 
	 { writeCalendar(target, myYear, myMonth, startDay, endDay); }
} 
function getURLArgs(caseBool) 
{ 
  var casefree = ( (true == caseBool) || (caseBool >= 1)) ? true: false; 
  var args  = new Object(); 
  var query = location.search.substring(1); 
  //  alert(query); 
  var pairs = query.split("&"); 
  for(var i = 0; i< pairs.length; i++) 
	 { 
		pairs[i]= unescape(pairs[i]); 
		var pos=pairs[i].indexOf('='); 
		if(-1 == pos) continue; 
		var argname; 
		if(true != casefree) { argname = pairs[i].substring(0,pos); } 
		else { argname = pairs[i].substring(0,pos).toLowerCase(); } 
		var value = pairs[i].substring(pos+1); 
		args[argname] = value; 
	 } 
  return args; 
} 
function newCalendars(myear, mmonth)
{ 
  // puts three calendars on the page from which it 
  // was called. (last month, this month, next month) 
  // Params
  // 
  // when called with 2 arguments
  // myear  -  the year for the center calendar
  // mmonth -  the month for the center calendar
  var myMonth = thisMonth; 
  var myYear  = thisYear; 
  if(arguments.length == 2) { myMonth = mmonth; myYear == myear; } 
  // it's surprising how many coders don't use modular arithmetic to 
  // do date and time. Javascript doesn't understand negative numbers in
  // positive modulus, so we add 11 instead of subtracting 1. 
  var lastMonth = (myMonth + 11) % 12; 
  var lmYear    = (myMonth == 0)? myYear -1: myYear; 
  var nextMonth = (myMonth +1)%12; 
  var nmYear    = (myMonth == 11)? myYear + 1: myYear;
  ///////////////////////////////////////////////////////////////////////////
  // WRITE CALENDAR #1
  // 
  document.write("<TABLE WIDTH=\"80\%\" align=\"center\"><TR VALIGN=\"TOP\"><TD>");
  var isThisMonth = ((lastMonth == myDate.getMonth())&& (lmYear==myDate.getFullYear())); 
  drawCalendar(document, lmYear, lastMonth,
					(isThisMonth ? myDate.getDate():0), 
					(isThisMonth ? myDate.getDate():0)
					); 
  isThisMonth = ((myMonth == myDate.getMonth())&& (myYear==myDate.getFullYear())); 
  document.write("</TD>\n<TD>");
  ///////////////////////////////////////////////////////////////////////////
  // WRITE CALENDAR #2
  // 
  drawCalendar(document, myYear, myMonth, 
					(isThisMonth? myDate.getDate():0), 
					(isThisMonth? myDate.getDate():0)); 
  document.write("</TD>\n<TD>");
  ///////////////////////////////////////////////////////////////////////////
  // WRITE CALENDAR #3
  // 
  isThisMonth = ((nextMonth == myDate.getMonth())&& (nmYear==myDate.getFullYear())); 
  drawCalendar(document, nmYear, nextMonth,
					(isThisMonth ? myDate.getDate():0), 
					(isThisMonth ? myDate.getDate():0)); 
  document.write("</TD></TR></TABLE>\n");

  var docName = location.pathname; 
  var buttonString = "<INPUT TYPE=\"BUTTON\" VALUE=\" <-- Zurück \"" +
	 " onClick='document.newCal.month.value=\"" + lastMonth+  "\"; " + 
	 "document.newCal.year.value=" + lmYear + "; " + 
	 "submit();' > "; 
  document.write("<FORM NAME=\"newCal\" METHOD=\"GET\" ACTION=\"" + docName + "\">"); 
  document.write("<INPUT TYPE=\"hidden\" NAME=\"month\" VALUE=\"" + myMonth +"\">");  
  document.write("<INPUT TYPE=\"hidden\" NAME=\"year\" VALUE=\"" + myYear +"\">");  
  document.write("<INPUT TYPE=\"hidden\" NAME=\"startOn\" VALUE=\"" + calStartDOW +"\">");  
  document.write("<CENTER>"); 
  document.write( buttonString); 
  buttonString = "<INPUT TYPE=\"BUTTON\" VALUE=\" Weiter --> \"" +
	 " onClick='document.newCal.month.value=" + nextMonth+  "; " + 
	 "document.newCal.year.value=" + nmYear + "; " + 
	 "submit();' > "; 
  document.write(" "); 
  document.write( buttonString); 
  document.write("<br>\n"); 
  var calStyleString = "" + 
	 "Kalender Style: US" + 
	 "<INPUT TYPE='radio' NAME='calStyle' VALUE='us'" +
	 ((calStartDOW == 0)? " CHECKED " : " ") + 
	 " onClick='document.newCal.startOn.value=\"0\"; " +  
	 "document.newCal.submit();'>  " +
	 "" + 
	 "Euro <INPUT TYPE='radio' NAME='calStyle' VALUE='euro'" +
	 ((calStartDOW == 1)? " CHECKED " : " ") + 
	 " onClick='document.newCal.startOn.value=\"1\"; " +  
	 "submit();'>"; 
  document.write(calStyleString); 
  document.write("</FORM>"); 
} 
//-->
</script>

</HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">
       <!--
       newCalendars();
       //-->
       </script>
</BODY>