JavaScript DHTML/GUI Components/Events Calendar

Материал из Web эксперт
Перейти к: навигация, поиск

Calendar and events

   <source lang="html4strict">


-HTML CODE:


>

<HTML> <HEAD>

       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="calendar.js"></SCRIPT>
       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="events.js"></SCRIPT>

</HEAD> <BODY> <SCRIPT LANGUAGE="javascript">

 var Dec2000 = new CalendarMonth(2000,12); // no parameters means you want the current month
 Dec2000.displayMonth();

</SCRIPT> </BODY> </HTML>


>
>

-EVENTS.JS CODE:


>

var evnt1 = new CalendarEvent(2000,12,25); evnt1.name = "Christmas Day"; evnt1.time = "All Day"; evnt1.location = "Everywhere"; evnt1.description = "Christmas Carols and Presents"; evnt1.addEvent();


>
  • Events Explained

You must make an event. Then manipulate it"s attributes directly. Any .js file may contain event entries. Each event must end with a <name>.addEvent(); call to put it into a list for the calendar to use.

The originial idea was to put all events in a single file... You may do something like this if you wish... but you will have to go in a manually change the include calls whenever you want... where each .js file lives in the same diretory as the page calling it...

       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="calendar.js"></SCRIPT>
  <SCRIPT LANGUAGE="JAVASCRIPT" SRC="DECEMBERevents.js"></SCRIPT>
       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="JANUARYevents.js"></SCRIPT>
       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="FEBUARYevents.js"></SCRIPT>
       <SCRIPT LANGUAGE="JAVASCRIPT" SRC="MARCHevents.js"></SCRIPT>

  • Library Explained

from top of file to bottom:: better off to read through the documented calendar file itself -- You have the option of hard coding a colorscheme into the calender. Defined in the top of the file and implemented in CSS. This should be self-explanitory when you look at the top of the file. -- General Date Knowledge: the names of the months, days of the week, etc... so that you may easily adapt to a different language... -- An Event: you make an event by (1) declaring it (2) setting its values (3) adding it to a list of events... (1)

   var event1 = new CalenderEvent(2000,1,01); //--> 4 digit year, 1-2 digit month, 1-2 digit day

(2)

   event1.name = "name of event string";
   event1.time = "time the event is going to happen";
   event1.location = "location event is happening";
   event1.description = "description of event";

(3)

   event1.addEvent(); 

The file "events.js" or any file you choose must contain code in the above form for as many events as you wish. They must all be entered by hand. Any event files must be loaded -after- calendar.js has been loaded. -- The CalendarMonth itself: months are numbered from 1->12

 three ways to make a calendar.

(1) the most useful way... gets current month and year from viewer"s computer (as does all javascript)

 var newCal = new CaledarMonth();
 newCal.displayMonth();

(2) you may specify a year:

 var newCal = new CaledarMonth(2001);
 newCal.displayMonth();

(3) you may specify both year and month: december 2001

 var newCal = new CaledarMonth(2001,12);
 newCal.displayMonth();

-- You may manipulate the months as so...

 var newCal = new CaledarMonth();
 newCal.lastYear();     // moves the calender one year back
 newCal.changeYear(-1); // moves the calender one year back
 newCal.changeYear(-2); // moves the calender two years back
 
 newCal.nextYear();     // moves the calender one year ahead
 newCal.changeYear(1);  // moves the calender one year ahead
 newCal.changeYear(2);  // moves the calender two years ahead
 newCal.lastMonth();     // moves the calender one month back
 newCal.changeMonth(-1); // moves the calender one month back
 newCal.changeMonth(-2); // moves the calender two months back
 
 newCal.nextMonth();     // moves the calender one month ahead
 newCal.changeMonth(1);  // moves the calender one month ahead
 newCal.changeMonth(2);  // moves the calender two months ahead
 newCal.yesterday();     // moves the calender one day back
 newCal.changeDay(-1);   // moves the calender one day back
 newCal.changeDay(-2);   // moves the calender two days back
 
 newCal.tomorrow();      // moves the calender one day ahead
 newCal.changeDay(1);    // moves the calender one months ahead
 newCal.changeDay(2);    // moves the calender two months ahead
 newCal.displayMonth();  // writes calendar to the screen

-- popupDay -- only called by calendar itself, but you may if you wish

 opens a new window and diplays a single day"s events
 popupDay( YYYYMMDD );

-- popupWeek -- only called by calendar itself, but you may if you wish

 opens a new window and diplays a single week"s events
 popupDay( year, month, day of week the month starts on sun->sat, first legal day of week 1->31, last legal day of week 1->31 );

-- popupMonth -- only called by calendar itself, but you may if you wish

 opens a new window and diplays all of a month"s events
 popupDay( year, month, day of the week the month starts on sun->sat );

-DONE!!



--> <HTML> <HEAD> <SCRIPT LANGUAGE="JAVASCRIPT"> /********************************************************** The Object-Oriented Events Calendar

       Version 3.0
Copyright (c) 1999 --  Edward Narkiewicz
               ednark@wm.edu

Created for The Gay Student Union @ The College of William and Mary This should include calendar.js, events.js, and the GPL

   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
                                                                                                                    • /
 /**********************************************************
         set Colors for Calendar
                               Empty is transparent or page deafult
 **********************************************************/
    var titleBackgroundColor = "#8080FF";
    var titleFontColor = "#FFFFFF";
    var daysofweekBackgroundColor = "#8080FF";
    var daysofweekFontColor = "#FFFFFF";
 var blankBackgroundColor = "";
 var blankFontColor = ""
 var blankString = " ";
 var pastBackgroundColor = "#C0C0FF";
 var pastFontColor = "#FFFFFF";
 var presentBackgroundColor = "#0000FF";
 var presentFontColor = "#FFFFFF";
 var futureBackgroundColor = "#A0A0FF";
 var futureFontColor = "#FFFFFF";
 var eventLinkColor = "#FF0000";
 /**********************************************************
         set Colors for PopupWindow
                               Empty is transparent or page deafult
 **********************************************************/
 var monthBackgroundColor = "#0000FF";
 var monthFontColor = "#FFFFFF";
 var nameBackgroundColor = "#8080FF";
 var nameFontColor = "#000000";
 var timeBackgroundColor = "#A0A0FF";
 var timeFontColor = "#000000";
 var locationBackgroundColor = "#A0A0FF";
 var locationFontColor = "#000000";
 var descriptionBackgroundColor = "#C0C0FF";
 var descriptionFontColor = "#000000";
 /**********************************************************
   Create StyleSheet for Color Scheme
 **********************************************************/
 var css = "";
 css += "<STYLE type="text/css"></STYLE> \n";
 document.writeln(css);

/**********************************************************

A bit of global knowledge our program should have
                                                                                                                    • /

var fullNameOfMonth = new Array( "January", "February", "March",

           "April", "May", "June", "July",
           "August", "September", "October",
           "November", "December" );

var shortNameOfMonth = new Array( "Jan", "Feb", "Mar",

                   "Apr", "May", "Jun", "Jul",
                 "Aug", "Sep", "Oct",
                 "Nov", "Dec" );

var daysInMonth = new Array( 31, 28, 31, 30, 31, 30,

         31, 31, 30, 31, 30, 31 );

var fullDayOfWeek = new Array( "Sunday", "Monday", "Tuesday",

                              "Wednesday", "Thursday",
                              "Friday", "Saturday");

var shortDayOfWeek = new Array( "Sun", "Mon", "Tue", "Wed",

           "Thr", "Fri", "Sat");

/**********************************************************

EVENT LIST DEFINITION
       In concept this is an EventList Object but...
       There is no need to make this it"s own object
       since there will only ever be one list in this version.
       You only get the array and the addition function...
                                                                                                                    • /

var Events = new Array(); /**********************************************************

EVENT CONSTRUCTOR DEFINITION
       var <event> = new CalendarEvent(YYYY,MM,DD);
       <event>.name = <name string>;
       <event>.time = 
                                                                                                                    • /

function CalendarEvent(year,month,day) {

 /**********************************************************
                       Date defaults will be given to the current day to save
                        us from any possible errors later on...
      **********************************************************/
       var now = new Date();     ///  format :: Wed Dec 13 06:49:08 GMT-0800 (Pacific Standard Time) 2000
       this.year = now.getYear();     /// # years from 1900
       if( this.year < 1000 ) /// if it gives less than 4 digits
       {
         if(this.year > 90) /// if it"s somewhere in the 1990"s
         {
           this.year += 1900
         }
         else /// it"s after 2000
         {
           this.year += 2000
         }
       }
       if( year)
       {
               this.year = year;
       }
       this.month = now.getMonth()+1; // 1->12
       if( month )
       {
               this.month = month;
       }
       this.day = now.getDate();
       if( day )
       {
               this.day = day;
       }
 /**********************************************************
   Specific information will be entered by directly
   accessing these variables... no need to hassle
   over method calls to do this.. but for clarity they
   will have to be called spereately
      **********************************************************/
       this.name = "";
       this.time = "";
       this.location = "";
       this.description = "";

}

/********************************************************** <event>.addEvent();

       this just adds the event to a list so we
       know where to look for it when we are
       writing the calendar
                                                                                                                    • /

CalendarEvent.prototype.addEvent = function() {

       /**********************************************************
       Regular Expression Check.. we want to enter items into the
       array in a very specific yyyyMMdd format... so we can access
       them easily... to do this we need to make sure the month
       and day are in two digit format...
       im going to assume the year is in 4 digit format... i don"t
       know how to fix it if it isn"t... so i"ll just pretend it will never
       happen                 :)
               if the month or day is not in Digit Digit format...
               assume it is [0...9] and add a prefix of 0... i would
               just check ( < 10 ) but i don"t know if 09 is equivelant
               to 9 in this situation and we don"t want two leaeding 0"s.
               the  <digit> + "" + <digit>
               is to make sure javascript concatenates as the string
               as opposed to adding the two as a number.
       **********************************************************/
       if( !( /^\d\d$/.test(this.month) ) )
       {
               this.month = 0 + "" + this.month;
       }
       if( !( /^\d\d$/.test(this.day) ) )
       {
               this.day = 0 + "" + this.day;
       }
       var arrayLocation = this.year + "" + this.month + "" + this.day;
       if( Events[arrayLocation] )
       {
               var size = Events[arrayLocation].length;
               Events[arrayLocation][size] = this;
       } else {
               Events[arrayLocation] = new Array();
               Events[arrayLocation][0] = this;
       }

}

/**********************************************************

CALENDER CONSTRUCTOR DEFINITION
 var <name1> = new CalendarMonth()        //--> grabs current month in current year
 var <name2> = new CalendarMonth(2004)    //--> grabs current month in year 2004
 var <name3> = new CalendarMonth(2001,01) //--> grabs january in 2001
 <name1>.changeDay(-1)      //--> moves the date to yesterday
 <name2>.changeDay(1)        //--> moves the date to tomorrow 2004
 <name1>.changeMonth(-1)      //--> moves month back one, to last month
 <name2>.changeMonth(1)      //--> moves to next month in the year 2004
 <name3>.changeYear(-1)      //--> moves to january 2000
 <name1>.changeYear(1)      //--> moves to this month next year
  <name1>.displaymonth();      //--> displays themonth
                                                                                                                    • /

function CalendarMonth(year,month) {

 /**********************************************************
  Get Calendar"s Date (with corrections for Leap year and Y2k)
  Defaults to current month and day...
      **********************************************************/
 var now = new Date();        /// format :: Wed Dec 13 06:49:08 GMT-0800 (Pacific Standard Time) 2000
 this.month = now.getMonth(); /// 0->11
 this.year = now.getYear();   /// # years from 1900
 this.isLeapYear = 0;       /// boolean set by program
 if( this.year < 1000 ) /// if it gives less than 4 digits
 {
   if(this.year > 90) /// if it"s somewhere in the 1990"s
   {
     this.year += 1900
   }
   else /// it"s after 2000
   {
     this.year += 2000
   }
 }
 this.dayOfWeek = now.getDay();
 this.dayOfMonth = now.getDate();
 /**********************************************************
  From the current day of the week, we can determine what
  day of the week the 1st of the month is on (sun->sat).
  Not very straight-forward.
      **********************************************************/
 this.firstOfMonth = ( this.dayOfWeek - ( this.dayOfMonth % 7 ) ) + 1;
   if( this.firstOfMonth < 0 )
   {
     this.firstOfMonth += 7;
   }
 this.lastOfMonth = ( this.firstOfMonth + ( daysInMonth[this.month] % 7 ) ) - 1;
   if( this.lastOfMonth > 6 )
   {
     this.lastOfMonth -= 7;
   }
 /**********************************************************
   if the user has specified a year or month or day
                  in the parameters, change to that date
      **********************************************************/
               if( year)
               {
                       this.changeYear( year - this.year );
                       if( month )
                       {
                               this.changeMonth( (month-1) - this.month );
                       }
               }

} /**********************************************************

CALENDER METHOD DEFINITIONS
                                                                                                                    • /

/**********************************************************

<calendar>.debugInfo()
 Shows all basic object info for debug purposes
                                                                                                                    • /

CalendarMonth.prototype.debugInfo = function() {

       var debug = " \n ";
       debug += "
\nYear = " + this.year; debug += "
\n Month = " + this.month; debug += "
\n Day of Month= " + this.dayOfMonth; debug += "
\n Leap Year? " + this.isLeapYear; debug += "
\n Today\"s Day of Week = " + this.dayOfWeek; debug += "
\n First of Month = " + this.firstOfMonth; debug += "
\n Last Of Month = " + this.lastOfMonth; document.writeln(debug);

} /**********************************************************

<calendar>.correctForLeapYear()
 Sets the number of days in february correctly
                                                                                                                    • /

CalendarMonth.prototype.correctForLeapYear = function() {

 /**********************************************************
   Just some stupid rules I found somewhere.
   I think/hope they are right.
 **********************************************************/
 if(this.year%4 != 0)
 {
   daysInMonth[1] = 28;
   this.isLeapYear = 0;
 }
 else if(this.year%400 == 0)
 {
   daysInMonth[1] = 29;
   this.isLeapYear = 1;
 }
 else if(this.year%100 == 0)
 {
   daysInMonth[1] = 28;
   this.isLeapYear = 0;
 }
 else
 {
   daysInMonth[1] = 29;
   this.isLeapYear = 1;
 }

}

/**********************************************************

<calendar>.lastYear()
 Changes Year back by one.
 just calls changeMonth(-12)
                                                                                                                    • /

CalendarMonth.prototype.lastYear = function() {

 this.changeMonth(-12);

} /**********************************************************

<calendar>.nextYear()
 Changes Year forward by one.
 just calls changeMonth(12)
                                                                                                                    • /

CalendarMonth.prototype.nextYear = function() {

 this.changeMonth(12);

} /**********************************************************

<calendar>.changeYear(x)
 Changes current month by x months.
 Foreward for positive x.
 Backwards for negative X.
                                                                                                                    • /

CalendarMonth.prototype.changeYear = function(x) {

 /**********************************************************
  Just checkin for a correct function call
 **********************************************************/
 if( x )
 {
   /**********************************************************
           Call a movement function x times (regardless of sign)
   **********************************************************/
   for(var i=0; i < Math.abs(x); i++)
   {
     if(x<0)
     {
       this.lastYear();
     }
     else
     {
       this.nextYear();
     }
   }// for
 }// if

}

/**********************************************************

<calendar>.lastMonth()
 Changes Month"s info back by one.
 New info determined from current month"s info.
                                                                                                                    • /

CalendarMonth.prototype.lastMonth = function() {

 this.month--;
 /**********************************************************
         We must take into account a possible year change
 **********************************************************/
 if( this.month < 0 )
 {
   this.month += 12;
   this.year--;
   this.correctForLeapYear();
 }
 /**********************************************************
   Again a kinda wierd determination of the first/last
   of the month. But it works
 **********************************************************/
 this.lastOfMonth = this.firstOfMonth-1;
   if( this.lastOfMonth < 0 )
   {
       this.lastOfMonth += 7;
   }
 this.firstOfMonth = ( this.lastOfMonth - ( daysInMonth[this.month] % 7 ) ) + 1;
   if( this.firstOfMonth > 6 )
   {
     this.firstOfMonth -= 7;
   }
               this.dayOfWeek =  ( this.firstOfMonth + ( this.dayOfMonth % 7 ) ) - 1;
   if( this.dayOfWeek < 0 )
   {
     this.dayOfWeek += 7;
   }
                                 if( this.dayOfWeek > 6 )
   {
     this.dayOfWeek -= 7;
   }

} /**********************************************************

<calendar>.nextMonth()
 Changes Month"s info foreward by one.
 New info determined from current month"s info.
                                                                                                                    • /

CalendarMonth.prototype.nextMonth = function() {

 this.month++;
 /**********************************************************
   We must take into account a possible year change
 **********************************************************/
 if( this.month > 11 )
 {
   this.month -= 12;
   this.year++;
   this.correctForLeapYear();
 }
 /**********************************************************
   Again a kinda wierd determination of the first/last
   of the month. But it works
 **********************************************************/
 this.firstOfMonth = this.lastOfMonth+1;
   if( this.firstOfMonth > 6 )
   {
       this.firstOfMonth -= 7;
   }
 this.lastOfMonth = ( this.firstOfMonth + ( daysInMonth[this.month] % 7 ) ) - 1;
   if( this.firstOfMonth < 0 )
   {
     this.firstOfMonth += 7;
   }
               this.dayOfWeek = ( this.firstOfMonth + ( this.dayOfMonth % 7 ) ) - 1;
   if( this.dayOfWeek < 0 )
   {
     this.dayOfWeek += 7;
   }
                                 if( this.dayOfWeek > 6 )
   {
     this.dayOfWeek -= 7;
   }

} /**********************************************************

<calendar>.changeMonth(x)
 Changes current month by x months.
 Foreward for positive x.
 Backwards for negative X.
                                                                                                                    • /

CalendarMonth.prototype.changeMonth = function(x) {

 /**********************************************************
   Just checkin for a correct function call
 **********************************************************/
 if( x )
 {
   /**********************************************************
     Call a movement function x times (regardless of sign)
   **********************************************************/
   for(var i=0; i < Math.abs(x); i++)
   {
     if(x<0)
     {
       this.lastMonth();
     }
     else
     {
       this.nextMonth();
     }
   }//for
 }//if

} /**********************************************************

<calendar>.yesterday()
 Changes Days back by one.
                                                                                                                    • /

CalendarMonth.prototype.yesterday = function() {

 this.dayOfMonth--;
 /**********************************************************
   We must take into account a possible month change
 **********************************************************/
 if( this.dayOfMonth < 0 )
 {
   this.lastMonth();
   this.dayOfMonth = daysInMonth[this.month];
 }

} /**********************************************************

<calendar>.tomorrow()
 Changes Day forward by one.
                                                                                                                    • /

CalendarMonth.prototype.tomorrow = function() {

 this.dayOfMonth++;
 /**********************************************************
   We must take into account a possible month change
 **********************************************************/
 if( this.dayOfMonth > daysinMonth[this.month] )
 {
   this.nextMonth();
   this.dayOfMonth = 1;
 }

} /**********************************************************

<calendar>.changeDay(x)
 Changes current month by x months.
 Foreward for positive x.
 Backwards for negative X.
                                                                                                                    • /

CalendarMonth.prototype.changeDay = function(x) {

 /**********************************************************
   Just checkin for a correct function call
 **********************************************************/
 if( x )
 {
   /**********************************************************
     Call a movement function x times (regardless of sign)
   **********************************************************/
   for(var i=0; i < Math.abs(x); i++)
   {
     if(x<0)
     {
       this.yesterday();
     }
     else
     {
       this.tomorrow();
     }
   }//for
 }//if

} /**********************************************************

<calendar>.displayMonth(yyyy,m)
       Displays current month when givin no parameters
       If given 1st param in 4 digit year format.. goes to that year
       if given 2nd parameter... goes to that month...
       This prints a self-contained Table that should be positioned
       by positioning the javascript call to displayMonth() itself.
                                                                                                                    • /

CalendarMonth.prototype.displayMonth = function() {

 /**********************************************************
   Must  if we are in the past present or future...
 **********************************************************/
 var now = new Date();
 var currentDayOfMonth = now.getDate();
 var currentMonth = now.getMonth();
 var currentYear = now.getYear();
 if( currentYear < 1000 ) /// if it gives less than 4 digits
 {
   if(currentYear > 90) /// if it"s somewhere in the 1990"s
   {
     currentYear += 1900
   }
   else /// it"s after 2000
   {
     currentYear += 2000
   }
 }
 /**********************************************************
   Boolean variables for location in time...
 **********************************************************/
 var past = 0;
 var present = 1;
 var future = 0;
 if( this.year < currentYear )
 {
   past = 1;
   present = future = 0;
 }
 else if( this.year == currentYear )
 {
   if( this.month < currentMonth )
   {
     past = 1;
     present = future = 0;
   }
   else if( this.month == currentMonth )
   {
     present = 1;
     past = future = 0;
   }
   else if( this.month > currentMonth )
   {
     future = 1;
     past = present = 0;
   }
 }
 else if( this.year > currentYear )
 {
   future = 1;
   past = present = 0;
 }
 /**********************************************************
   Get correct mm format of date
 **********************************************************/
 var mm = this.month+1;
 if( !( /^\d\d$/.test(this.month+1) ) )
 {
   mm = 0 + "" + mm;
 }
 var yyyymm = this.year + "" + mm;
 /**********************************************************
   Draw the table header
 **********************************************************/
 var table = "";
table += "
"; table += " \n"; table += " \n"; table += " \n"; table += " \n"; table += " \n"; table += "<TR align="center"> \n"; /********************************************************** Draw the week"s labels **********************************************************/ for( var weekday = 0; weekday < 7; weekday++) { table += "<TD width="30" class="DayOfWeek">"; table += shortDayOfWeek[weekday]; table += "</TD> \n"; } table += "<TD class="DayOfWeek">"; table += " "; table += "</TD> \n"; table += "</TR> \n"; /********************************************************** Draw the table meat **********************************************************/ var dayCounter = 1; var startDayOfWeek; var startDate; var endDate; /********************************************************** For 6 possible weeks a month may span... think about it **********************************************************/ for( var week=1; week <= 6 && (dayCounter <= daysInMonth[this.month]); week++) { /********************************************************** Figure out the span of days to look at when viewing the whole week at a time.. different for week 1 **********************************************************/ if( week == 1 ) { startDayOfWeek = this.firstOfMonth; startDate = 1; endDate = 7-this.firstOfMonth; } else { startDayOfWeek = 0; startDate = dayCounter; endDate = ( (dayCounter+6) > daysInMonth[this.month] )? daysInMonth[this.month]:(dayCounter+6); } table += "<TR align="center"> \n"; /********************************************************** For each day of the week **********************************************************/ for( weekday = 1; weekday <= 7; weekday++) { /********************************************************** Show empty cells before and after month exists **********************************************************/ if( ((week == 1) && (weekday <= this.firstOfMonth)) || (dayCounter > daysInMonth[this.month]) ) { table += "<TD width="30" class="Blank">"; table += blankString; table += "</TD> \n"; } /********************************************************** Show the date with correct color **********************************************************/ else { var ColorScheme = "Blank"; if( past ) { ColorScheme = "Past"; } else if( present ) { if( dayCounter < currentDayOfMonth ) ///earlier this month { ColorScheme = "Past"; } else if( dayCounter == currentDayOfMonth ) ///today { ColorScheme = "Present"; } else ///later this month { ColorScheme = "Future"; } } else if( future ) { ColorScheme = "Future"; } /********************************************************** Get a two digit dd format of date **********************************************************/ var dd = dayCounter; if( !( /^\d\d$/.test(dayCounter) ) ) { dd = 0 + "" + dd; } var arrayLocation = this.year + "" + mm + "" + dd; var popup = ""; if( Events[arrayLocation] ) { popup = " class="Event" href="javascript:popupDay(" + arrayLocation + ");""; } table += "<TD width="30" class="" + ColorScheme + "">"; table += "<A " + popup + " NAME="" + this.year + "|" + mm + "|" + dayCounter + "">"; table += dayCounter; table += "</A>"; table += "</TD> \n"; dayCounter++; } } table += "<TD width="10" class="Title">"; table += "<A NAME="Week" + week + "" HREF="javascript:popupWeek(" + this.year + "," + this.month + "," + startDayOfWeek + "," + startDate + "," + endDate + ");">"; table += week table += "</A>"; table += "</TD> \n"; table += "</TR> \n"; } /********************************************************** Draw the table footer **********************************************************/ table += "</TABLE> \n"; table += "</DIV> \n"; /// this.debugInfo(); document.writeln(table); } /******************************************************** Event Window used by all popup functions
                                                                                                                  • /
var eventWindow; /******************************************************** popupDay() this function displays a single days events in one newly created window. *********************************************************/ function popupDay( date ) { eventWindow = window.open("","CalendarPopup","width=300,height=330,scrollbars"); /******************************************************** Some Regular expression magic to make YYYYMMDD = YYYY + MM + DD *********************************************************/ date = date + ""; var yyyymmdd = new Array(); yyyymmdd = date.match( /(^\d\d\d\d)(\d\d)(\d\d)/ ); var year= yyyymmdd[1]; var month = yyyymmdd[2]; var day = yyyymmdd[3]; /******************************************************** Some Definitions of the Color Scheme *********************************************************/ var css = ""; css += "<STYLE type="text/css"></STYLE> \n"; /******************************************************** Start page with the close/print buttons *********************************************************/ var popup = ""; popup += "<form> \n"; popup += "<input type="button" value="Close" onClick="self.close();"> \n"; popup += "  &nbsp \n"; popup += "<input type="button" value="Print" onClick="self.print();"> \n"; popup += "</form> \n"; /******************************************************** Display the name of the month at the top *********************************************************/ popup += "
";
 table += "<A NAME="" + yyyymm + "">";
 table +=  fullNameOfMonth[this.month] + ", " + this.year;
 table += "</A>";
table += "
<A HREF="javascript:popupMonth(" + this.year + "," + this.month + ", " + this.firstOfMonth + ")">";
 table += "view all";
table += "</a>
</B>
\n"; popup += " \n";
 /********************************************************
   For each Event that exists for today, display it
 *********************************************************/
 var limit = Events[date].length;
 for( i=0; i < limit;  i++ )
 {
popup += " \n"; popup += " \n" ; popup += " \n";
 }//for
popup += "
" + fullNameOfMonth[month-1] + ", " + day + "  " + year + "
" + Events[date][i].name + "
" + Events[date][i].time + ", " + Events[date][i].location + "
" + Events[date][i].description + "
\n";
 /********************************************************
   Make the call to actually write popup to the new window
   be sure to close the file when you are done
 *********************************************************/
 eventWindow.document.write(css);
 eventWindow.document.write(popup);
 eventWindow.document.close();
 eventWindow.focus();
 return;

} /********************************************************

popupWeek()
 this function displays a weeks events in
 one newly created window.
*********************************************************/

function popupWeek( year, month, startDayOfWeek, startDate, endDate ) {

 /********************************************************
   If the month is not in two digits, make it two digits
 *********************************************************/
 if( !( /^\d\d$/.test(month+1) ) )
 {
   mm = 0 + "" + (month+1);
 } else {
   mm = (month+1);
 }
 /********************************************************
   Open a new window with only scrollbars
 *********************************************************/
 eventWindow = window.open("","CalendarPopup","scrollbars");
 var popup = "";
 popup += "<form> \n";
 popup += "<input type="button" value="Close" onClick="self.close();"> \n";
 popup += "  &nbsp \n";
 popup += "<input type="button" value="Print" onClick="self.print();"> \n";
 popup += "</form> \n";
 /********************************************************
   Write full name of month at top
 *********************************************************/
popup += " \n"; popup += " \n";
 /********************************************************
   For each day in the week write it"s name
 *********************************************************/
 var day = startDate;
popup += ""; for( i=0; (i < 7); i++) { popup += ""; }//for popup += ""; /******************************************************** For each day in the week.. write all of its events *********************************************************/ day = startDate; popup += ""; for( i=0; (i < 7); i++, day++) { /******************************************************** Make sure the day is in two digits so we can access Events array *********************************************************/ if( !( /^\d\d$/.test(day) ) ) { dd = 0 + "" + day; } else { dd = day; } date = year + "" + mm + "" + dd; popup += " \n"; }//for popup += ""; popup += "
" + fullNameOfMonth[month] + ", " + year + "
";
   popup += fullDayOfWeek[i];
   if( (i >= startDayOfWeek) && (day <= daysInMonth[month]) )
   {
     popup += ", " + day;
     day++;
   } else {
     popup += " ";
   }
popup += "
\n"; popup += " \n"; /******************************************************** Write out each event for each day of the week *********************************************************/ if( Events[date] ) { var limit = Events[date].length; for( var j = 0; j < limit; j++ ) { popup += " \n"; popup += " \n" ; popup += " \n";
     }//for
   }
popup += " \n"; popup += "
" + Events[date][j].name + "
" + Events[date][j].time + ", " + Events[date][j].location + "
" + Events[date][j].description + "
 
\n"; popup += "
\n";
 /********************************************************
   Write the css the popup calendar then close the document    
 *********************************************************/
 eventWindow.document.write(css);
 eventWindow.document.write(popup);
 eventWindow.document.close();
 eventWindow.focus();
 return;

} /**********************************************************

popupMonth()
 this function displays a whole month"s events in
 one newly created window.
                                                                                                                    • /

function popupMonth( year, month, startDayOfMonth ) {

 /********************************************************
   If the month is not in two digits, make it two digits
 *********************************************************/
 if( !( /^\d\d$/.test(month+1) ) )
 {
   mm = 0 + "" + (month+1);
 } else {
   mm = (month+1);
 }
 /********************************************************
   Open a new window with only scrollbars
 *********************************************************/
 eventWindow = window.open("","CalendarPopup","scrollbars");
 /********************************************************
   Open a new window with only scrollbars
 *********************************************************/
 var popup = "";
 popup += "<form> \n";
 popup += "<input type="button" value="Close" onClick="self.close();"> \n";
 popup += "  &nbsp \n";
 popup += "<input type="button" value="Print" onClick="self.print();"> \n";
 popup += "</form> \n";
popup += " \n"; popup += " \n";
 var dayCounter = 1;
 /**********************************************************
   For 6 possible weeks a month may span... think about it
 **********************************************************/
 for( var week=1; week <= 6 && (dayCounter <= daysInMonth[month]); week++)
 {
popup += " \n"; /********************************************************** For each day of the week write the date **********************************************************/ var day = dayCounter; for( weekday = 1; weekday <= 7; weekday++) { popup += "\n"; } else { popup += fullDayOfWeek[weekday-1] + ", " + day; popup += "</B></TD>\n"; day++; }//ifelse }//for weekday popup += " \n"; popup += "<TR ALIGN="CENTER"> \n"; /********************************************************** For each day of the week write each event **********************************************************/ for( weekday = 1; weekday <= 7; weekday++) { if( !( /^\d\d$/.test(dayCounter) ) ) { dd = 0 + "" + dayCounter; } else { dd = dayCounter; } date = year + "" + mm + "" + dd; popup += "<TD CLASS="Description" WIDTH="150" ALIGN="CENTER" VALIGN="TOP"> \n"; /********************************************************** Draw events if they exists for the weekday **********************************************************/ if( ((week == 1) && (weekday <= startDayOfMonth)) || (dayCounter > daysInMonth[month]) ) { popup += " "; } else { popup += "
" + fullNameOfMonth[month] + ", " + year + "
\n";
     /**********************************************************
       Draw the date if it exists for the weekday
     **********************************************************/
     if( ((week == 1) && (weekday <= startDayOfMonth)) ||
         (day > daysInMonth[month]) )
     {
       popup += " ";
popup += "
\n"; if( Events[date] ) { var limit = Events[date].length; for( var j = 0; j < limit; j++ ) { popup += " \n"; popup += " \n" ; popup += " \n";
         }//for
       } else {
popup += "
\n";
       }
popup += "
" + Events[date][j].name + "
" + Events[date][j].time + ", " + Events[date][j].location + "
" + Events[date][j].description + "
 
\n";
       dayCounter++;
     }//ifelse
     popup += "</TD> \n";
   }//for weekday
   popup += "</TR> \n";
 }//for week
 
 popup += "</TABLE> \n";
 
 eventWindow.document.write(css);
 eventWindow.document.write(popup);
 eventWindow.document.close();
 eventWindow.focus();
 return;

} </SCRIPT> <SCRIPT LANGUAGE="JAVASCRIPT"> var evnt = new CalendarEvent(2002,1,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "<a href="#">DESCRIPTION</a>"; evnt.addEvent(); var evnt = new CalendarEvent(2002,1,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "<a href="#">DESCRIPTION</a>"; evnt.addEvent(); var evnt = new CalendarEvent(2002,1,1); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,1,11); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,17); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,25); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,2,8); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,3,15); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent(); var evnt = new CalendarEvent(2002,3,20); evnt.name = "NAME"; evnt.time = "TIME"; evnt.location = "LOCATION"; evnt.description = "DESCRIPTION"; evnt.addEvent();

</SCRIPT> <SCRIPT LANGUAGE="javascript">

 var Month = new Array();
 for ( var i = 2001; i < 2003; i++ ) {
   for ( var j = 1; j < 12; j++ ) {
     Month[Month.length] = new CalendarMonth(i,j);
   }
 }

</SCRIPT></HEAD> <BODY> <SCRIPT LANGUAGE="javascript">

 for ( var i = 0; i < Month.length; i++ ) {
   Month[i].displayMonth();
 }

</SCRIPT> </BODY> </HTML>

      </source>

Навигация