Related items

Born on the 4th of July

You are here: irt.org | Articles | JavaScript | Date and Time | Born on the 4th of July [ previous next ]

Published on: Saturday 8th November 1997 By: Martin Webb

Introduction
Calendar Events
Also born on this day
JavaScript data files
Working Example
Source Code

Introduction

This article will show how to display events and birthdays for any specific date. For birthdays it will use JavaScript *.js source files as data files to hold each months birthday data.

Calendar Events

The calendar events are held as Event objects each of which have three properties, day, month and what, with a myEvent[] array.

The JavaScript required to define the Event objects and the setEvent() function required to create an instance of one is shown below:

function Event(day,month,what) {
    this.day = day;
    this.month = month;
    this.what = what;
}

function setEvent(day,month,what) {
    myEvent[eventIndex++] = new Event(day,month,what);
}

var eventIndex = 0;
var myEvent = new Array();

We can then create as many Event objects as required:

setEvent( 1, 1,"New Year's Day");
setEvent( 1, 1,"Mary - Mother of God");
setEvent( 6, 1,"Epiphany");
setEvent( 2, 2,"Groundhog Day");
setEvent(12, 2,"Lincoln's Birthday");
setEvent(14, 2,"Valentine's Day");
setEvent(22, 2,"Washington's Birthday");
setEvent(29, 2,"Leap Year's Day");
setEvent(17, 3,"St. Patrick's Day");
setEvent(19, 3,"St. Joseph");
setEvent( 1, 4,"April Fools's Day");
setEvent(15, 4,"Tax Day");
setEvent(14, 6,"Flag Day");
setEvent(29, 6,"St. Peter & St. Paul");
setEvent( 4, 7,"Independence Day");
setEvent(12, 7,"Battle of the Boyne (N. Ireland)");
setEvent(15, 8,"Assumption");
setEvent(12,10,"Columbus Day");
setEvent(24,10,"United Nations Day");
setEvent(31,10,"Halloween");
setEvent( 1,11,"All Saint's Day");
setEvent( 5,11,"Guy Fawkes Night");
setEvent(11,11,"Veteran's Day");
setEvent( 8,12,"Immaculate Conception");
setEvent(24,12,"Christmas Eve");
setEvent(25,12,"Christmas Day");
setEvent(26,12,"Boxing Day - St Stephen's Day");
setEvent(31,12,"New Year's Eve");

The eventIndex variable holds the number of Event objects which is also the length of the myEvent[] array.

To retrieve an event for a specific date the showEvent() can be used:

function showEvent(day,month) {
    var output = '';
    for(var i=0; i < eventIndex; i++) {
        if ((day == myEvent[i].day) && (month == myEvent[i].month))
            output += myEvent[i].what+'<BR>';
    }
    return output;
}

The showEvent() function compares the day and month passed with the day and month properties of each myEvent object. It will then return the complete list of all the relevant myObject what poperties.

To display the event/s for a specific date use the following:

document.write(showEvent(day,month));

Also born on this day

The JavaScript code to create a birthday database is almost identical to that for the event database:

function Birthday(day,month,year,who) {
    this.day = day;
    this.month = month;
    this.year = year;
    this.who = who;
}

function setBirthday(day,month,year,who) {
    myBirthday[birthdayIndex++] = new Birthday(day,month,year,who);
}

var birthdayIndex = 0;
var myBirthday = new Array();

The showBirthday() function will return a list of all the people born of the day passed.

It also makes use of the FullDate() function described in the previous article Monday's child is full of grace.

function showBirthday(day) {
    var output = '';
    for(var i=0; i < birthdayIndex; i++) {
        var birthDay = myBirthday[i].day;

        if (day == birthDay) {
            var birthMonth = myBirthday[i].month;
            var birthYear = myBirthday[i].year;
            var who = myBirthday[i].who;
            output += '<BR>' + who + ' (' + FullDate(birthDay,birthMonth,birthYear) + ')';
        }
    }

    if (output != '')
        output = 'Born on this day:' + output

    return output;
}

The data for the birthdays has not yet been shown. See the next section.

JavaScript data files

JavaScript *.js source files are described elsewhere within the JavaScript 'No Content' Web site.

Rather than load the whole birthday database in one go, it is quicker to only load the part required, especially if the database is rather large.

The following JavaScript will load the JavaScript *.js source file for the relevant month.

<SCRIPT LANGUAGE="JavaScript"><!--
document.write('<SCRIPT SRC="who/birth' + months[month] + '.js"></SCRIPT>');
//--></SCRIPT>

It uses a months[] array of abbreviated month names using the makeArray() function described in the previous article Blind Date:

var months = new makeArray('jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec');

Rather than include another array of data, it is possible to reuse the monthsofyear[] array defined in the previous article Blind Date as follows:

alert(monthsofyear[1].substring(0,3).toLowerCase());

However, this just makes the reading of the script more complicated.

If a browser does not support JavaScript *.js source files, then the birthday functionality will still work, but as the data file is not loaded the script will not provide any birthdays - a small price to pay for avoiding the need to load the hole database in the main html file.

The JavaScript *.js source files are named birthjan.js, birthfeb.js, birthmar.js birthapr.js, birthmay.js, birthjun.js birthjul,js, birthaug.js, birthsep.js birthoct.js, birthnov.js, birthdec.js and are all located in the who subdirectory. The contents of birthjul.js would look similar to:

setBirthday(01,07,1916,"Olivia DeHavilland");
setBirthday(02,07,1877,"Hermann Hesse");
setBirthday(03,07,1883,"Franz Kafka");
setBirthday(04,07,1927,"Gina Lollobrigida");
setBirthday(05,07,1810,"P.T. Barnum");
setBirthday(07,07,1940,"Ringo Starr");
setBirthday(08,07,1839,"John D. Rockefeller");
setBirthday(09,07,1856,"Nicola Tesla");
setBirthday(12,07,1861,"George Washington Carver");
setBirthday(14,07,1918,"Ingmar Bergman");
setBirthday(15,07,1606,"Rembrandt Van Rijn");
setBirthday(16,07,1911,"Ginger Rogers");
setBirthday(17,07,1889,"Erle Stanley Gardner");
setBirthday(18,07,1918,"Nelson Mandela");
setBirthday(19,07,1834,"Edgar Degas");
setBirthday(20,07,1938,"Diana Rigg");
setBirthday(21,07,1899,"Ernest Hemingway");
setBirthday(22,07,1898,"Alexander Calder");
setBirthday(26,07,1856,"George Bernard Shaw");
setBirthday(28,07,1866,"Beatrix Potter");
setBirthday(29,07,1883,"Benito Mussolini");
setBirthday(30,07,1863,"Henry Ford");