Event Calendar : Calendar « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Event
7. Event onMethod
8. Form Control
9. GUI Components
10. HTML
11. Javascript Collections
12. Javascript Objects
13. Language Basics
14. Node Operation
15. Object Oriented
16. Page Components
17. Security
18. Style Layout
19. Table
20. Utilities
21. Window Browser
Microsoft Office Word 2007 Tutorial
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
C# / C Sharp
C# / CSharp Tutorial
ASP.Net
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
PHP
Python
SQL Server / T-SQL
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
JavaScript DHTML » GUI Components » Calendar 
Event Calendar

<HTML>
<HEAD>
<!-- calendar.js -->
<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 = '&nbsp;';

  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"><!-- \n';
  css += '.Title {background-color:' + titleBackgroundColor + '; color:' + titleFontColor + '} \n';
  css += '.DayOfWeek {background-color:' + daysofweekBackgroundColor + '; color:' + daysofweekFontColor + '} \n';
  css += '.Blank {background-color:' + blankBackgroundColor + '; color:' + blankFontColor + '} \n';
  css += '.Past {background-color:' + pastBackgroundColor + '; color:' + pastFontColor + '} \n';
  css += '.Present {background-color:' + presentBackgroundColor + '; color:' + presentFontColor + '} \n';
  css += '.Future {background-color:' + futureBackgroundColor + '; color:' + futureFontColor + '} \n';
  css += '.Event color:' + eventLinkColor + '} \n';
  css += '.Month {background-color:' + monthBackgroundColor + '; color:' + monthFontColor + '} \n';
  css += '.Name {background-color:' + nameBackgroundColor + '; color:' + nameFontColor + '} \n';
  css += '.Time {background-color:' + timeBackgroundColor + '; color:' + timeFontColor + '} \n';
  css += '.Location {background-color:' + locationBackgroundColor + '; color:' + locationFontColor + '} \n';
  css += '.Description {background-color:' + descriptionBackgroundColor + '; color:' + descriptionFontColor + '} \n';
  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(  312831303130,
          313130313031 );

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 = <time string>;
        <event>.location = <location string>;
        <event>.description = <description string>;
        <event>.addEvent();
**********************************************************/
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
        ifthis.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
          }
        }
        ifyear)
        {
                this.year = year;
        }

        this.month = now.getMonth()+1// 1->12
        ifmonth )
        {
                this.month = month;
        }

        this.day = now.getDate();
        ifday )
        {
                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 = '' this.month;
        }

        if!/^\d\d$/.test(this.day) ) )
        {
                this.day = '' this.day;
        }

        var arrayLocation = this.year + '' this.month + '' this.day;

        ifEvents[arrayLocation] )
        {
                var size = Events[arrayLocation].length;
                Events[arrayLocation][sizethis;
        else {
                Events[arrayLocationnew Array();
                Events[arrayLocation][0this;
        }
}


/**********************************************************
 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

  ifthis.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 % ) ) 1;
    ifthis.firstOfMonth < )
    {
      this.firstOfMonth += 7;
    }

  this.lastOfMonth = this.firstOfMonth + daysInMonth[this.month) ) 1;
    ifthis.lastOfMonth > )
    {
      this.lastOfMonth -= 7;
    }


  /**********************************************************
    if the user has specified a year or month or day
                   in the parameters, change to that date
       **********************************************************/
                ifyear)
                {
                        this.changeYearyear - this.year );
                        ifmonth )
                        {
                                this.changeMonth( (month-1this.month );
                        }
                }

}
/**********************************************************
 CALENDER METHOD DEFINITIONS
**********************************************************/

/**********************************************************
 <calendar>.debugInfo()
  Shows all basic object info for debug purposes
**********************************************************/
CalendarMonth.prototype.debugInfo = function()
{
        var debug = ' \';

        debug += '<br>\nYear = ' + this.year;
        debug += '<br>\n Month = ' + this.month;
        debug += '<br>\n Day of Month= ' + this.dayOfMonth;
        debug += '<br>\n Leap Year? ' + this.isLeapYear;
        debug += '<br>\n Today\'s Day of Week = ' + this.dayOfWeek;
        debug += '<br>\n First of Month = ' + this.firstOfMonth;
        debug += '<br>\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%!= 0)
  {
    daysInMonth[128;
    this.isLeapYear = 0;
  }
  else if(this.year%400 == 0)
  {
    daysInMonth[129;
    this.isLeapYear = 1;
  }
  else if(this.year%100 == 0)
  {
    daysInMonth[128;
    this.isLeapYear = 0;
  }
  else
  {
    daysInMonth[129;
    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)
  {
    /**********************************************************
            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
  **********************************************************/
  ifthis.month < )
  {
    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;
    ifthis.lastOfMonth < )
    {
        this.lastOfMonth += 7;
    }

  this.firstOfMonth = this.lastOfMonth - daysInMonth[this.month) ) 1;
    ifthis.firstOfMonth > )
    {
      this.firstOfMonth -= 7;
    }

                this.dayOfWeek =  this.firstOfMonth + this.dayOfMonth % ) ) 1;
    ifthis.dayOfWeek < )
    {
      this.dayOfWeek += 7;
    }
                                  ifthis.dayOfWeek > )
    {
      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
  **********************************************************/
  ifthis.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;
    ifthis.firstOfMonth > )
    {
        this.firstOfMonth -= 7;
    }

  this.lastOfMonth = this.firstOfMonth + daysInMonth[this.month) ) 1;
    ifthis.firstOfMonth < )
    {
      this.firstOfMonth += 7;
    }

                this.dayOfWeek = this.firstOfMonth + this.dayOfMonth % ) ) 1;
    ifthis.dayOfWeek < )
    {
      this.dayOfWeek += 7;
    }
                                  ifthis.dayOfWeek > )
    {
      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)
  {
    /**********************************************************
      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
  **********************************************************/
  ifthis.dayOfMonth < )
  {
    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
  **********************************************************/
  ifthis.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)
  {
    /**********************************************************
      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();
  ifcurrentYear < 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;

  ifthis.year < currentYear )
  {
    past = 1;
    present = future = 0;
  }
  else ifthis.year == currentYear )
  {
    ifthis.month < currentMonth )
    {
      past = 1;
      present = future = 0;
    }
    else ifthis.month == currentMonth )
    {
      present = 1;
      past = future = 0;
    }
    else ifthis.month > currentMonth )
    {
      future = 1;
      past = present = 0;
    }
  }
  else ifthis.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 = '' + mm;
  }

  var yyyymm = this.year + '' + mm;

  /**********************************************************
    Draw the table header
  **********************************************************/
  var table = '';
  table += '<DIV name=