Was dem einen der 3-Monatskalender an der Wand, das ist dem anderen der 3-Monatskalender auf der Webseite. Freie Eingabe von Feiertagen sind ebenfalls möglich, die dann farbig dargestellt werden. Umstellung von EURO- auf US-Format per Mausklick.
HTML-Einbindung <!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <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> <!-- Diesen Code musst Du in den -body- einbauen --> <SCRIPT LANGUAGE="JavaScript"> <!-- newCalendars(); //--> </script> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->
Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"