Event Calendar 2

JavaScriptSource Staff Sep 11, 2003

Create your own event calendar using this script. Just add in your special dates make a few selctions and your done. The calendar can be printed or saved as an html document.

Event input suggestions: If the event has an explanation, give it a brief title, followed by a colon (:), followed by the explanation. Separate events by typing <br> between the end of one event and the beginning of the next event (this puts the new event on its own line). HTML codes for bold and italic will also work.

	Choose a month: Adjusts for # of days/month.	Day that the month starts on: Use Ref. Cal. above to find day.	The four-digit year for this calendar is: This can be changed as needed.
What happens on the 1st?	What happens on the 2nd?	What happens on the 3rd?	What happens on the 4th?
What happens on the 5th?	What happens on the 6th?	What happens on the 7th?	What happens on the 8th?
What happens on the 9th?	What happens on the 10th?	What happens on the 11th?	What happens on the 12th?
What happens on the 13th?	What happens on the 14th?	What happens on the 15th?	What happens on the 16th?
What happens on the 17th?	What happens on the 18th?	What happens on the 19th?	What happens on the 20th?
What happens on the 21st?	What happens on the 22nd?	What happens on the 23th?	What happens on the 24th?
What happens on the 25th?	What happens on the 26th?	What happens on the 27th?	What happens on the 28th?
What happens on the 29nd?	What happens on the 30th?	What happens on the 31st?

Color for background of page:
#
Color for text outside of calendar:
#
Color of the calendar cells:
#
Color for text inside of calendar:
#

Choose your first choice for the text font:
Arial Comic Sans MS Trebuchet MS Verdana
Arial Black Impact
Courier New Georgia Times New Roman

Choose your second choice for the text font:
Arial Comic Sans MS Trebuchet MS Verdana
Arial Black Impact
Courier New Georgia Times New Roman

** Use Hex. codes for colors - do not include the # symbol
Ex: 000000 = black ffffff = White 0000ff = blue ff0000 = red cccccc = gray

Clicking the "New Calendar" button will clear this form.

To save the calendar that you have just made to your hard-drive, do the following steps:

(Using Windows Operating Systems)
1) Use the mouse to "right click" on the calendar page you just created.
2) In the popup list choose "View Source" or "View Page Source."
3) A little text file will open up - click on "File" in the toolbar of that new file.
4) Select "Save As" - Use the "Save in" dropdown window to find a good place on your hard-drive to save the file in so you can find it later.
5) While still in the Save As window, give the file a name like "January2003.html" (make sure to use the quotes around the file name and include the .html or .htm inside the quotes).
6) Click "Save" button.
7) Go to the directory that you saved the html file in.
8) Right click on the file and use the "Open With" to find your browser type.
9) If you have a newer version of Word on your computer, you may also be able to open the document in Word (after it has been saved). In Word, you can edit information that you might want changed on the calender at a later date (something you can't easily do with an html file). To do this, to highlight the calendar (Edit -> Select All + Edit -> Copy) and paste it into a new Word document window. Not all computers have the newer Word versions, so this last choice may not work for everyone.

The JavaScript Source: Time and Date: Event Calendar

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL EVENT CALENDAR:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

var days = new Array("",0,1,2,3,4,5,6);

var monthdays = new Array("", 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

// to adjust for leap year
var Tyear = window.document.calendar_form.year.value;
if  (((Tyear % 4)==0) && (((Tyear % 100)!=0) || ((Tyear % 400)==0))) {
monthdays[2] = 29;
}

var Tnum_of_days = monthdays[window.document.calendar_form.which_month.selectedIndex];

var spaces = days[window.document.calendar_form.which_day.selectedIndex];

for(i=0; i<9; i++) {
if(window.document.calendar_form.font1[i].checked == true)
 var font1 = window.document.calendar_form.font1[i].value
 }

for(i=0; i<9; i++) {
if(window.document.calendar_form.font2[i].checked == true)
 var font2 = window.document.calendar_form.font2[i].value
 }

var code = "";

code += "<html><head><title>";

code += "Events in ";

var month = window.document.calendar_form.which_month.options[window.document.calendar_form.which_month.selectedIndex].text;

var year = window.document.calendar_form.year.value;

code += month;

code += " ";

code += year;

code += "</title></head>\n<body bgcolor=\"";

code += window.document.calendar_form.color1.value;

code += "\">\n";

code += "<center>";

code += "<p><font size=\"5\" color=\"#";

code += window.document.calendar_form.color2.value;

code += "\" face=\"" + font1 + "," + font2 + "\">";

code += month;

code += " ";

code += year;

code += "<br>\n";

code += "Calendar Events</font></p>\n";

code += "</center>\n";

code += "<table align=\"center\" width=\"700\" cellpadding=\"3\" cellspacing=\"1\" border=\"2\" bgcolor=\"#";

code += window.document.calendar_form.color3.value;

code += "\">\n";

code += "<tr><td colspan=7><font color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><center><strong>";

code += month;

code += " ";

code += window.document.calendar_form.year.value;

code += "</strong></center></font></td></tr>";

code += "<tr>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Sunday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Monday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Tuesday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Wednesday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Thursday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Friday</b></font></td>";

code += "<td width=100 align=center><font size=\"2\" color=\"#";

code += window.document.calendar_form.color4.value;

code += "\"><b>Saturday</b></font></td>";

code += "</tr>";

// for the date cells

code += "<tr>";

while (spaces >7) spaces -=7;

for (i=1; i <=spaces; i++) {

code += "<td align=center> \;</td>";

}

count=1;

if (spaces + count <=8) {

bal = 7-spaces;

// is this the portion here?

//if ((bal == 1) || (bal == 2) || (bal == 3) ||( bal == 4) || (bal == 5) || (bal == 6) || (bal == 7))  {

for (a =0; a <bal; a++) {

code += "<td valign=top width=\"100\" height=\"50\"><font color=\"#";

code += window.document.calendar_form.color4.value;

code += "\" size=\"2\" face=\"" + font1 + "," + font2 + "\"><b>";

code += count;

code += "</b><P align=right>";

// Please Note that count+2 is used to help the counter move beyond the counting of the first "elements" which_month[0], which_day[1] & year[2] to catch the correct text since these are at the start of the table.

code += window.document.calendar_form.elements[count+2].value;

code += "</p></font></td>\n";

count++;

}

code += "</tr>\n";

code += "<tr>\n";

}

// takes us into the rest of the calendar

while (count <= Tnum_of_days) {

for (b =0; b <7; b++) {

code += "<td valign=top width=\"100\" height=\"50\"><font color=\"#";

code += window.document.calendar_form.color4.value;

code += "\" size=\"2\" face=\"" + font1 + "," + font2 + "\"><b>";

if (count <= Tnum_of_days) {

code += count;

code += "</b><P align=right>";

code += window.document.calendar_form.elements[count+2].value;

code += "</p></font>";

}

else {

code += " ";

}

code += "</td>\n";

count++;

}

code += "</tr>\n";

code += "<tr>\n";

}

code += "</tr>\n";

code += "</table>\n";

code += "</body></html>\n";

msgWindow=window.open("","displayWindow","toolbar=no,width=700,height=400,directories=yes,status=yes,scrollbars=yes,resizable=yes,menubar=yes");
msgWindow.document.write(code);
msgWindow.document.close();

}

function ref() {
window.open("ReferenceCal.html","newWindow","toolbar=no,width=300,height=400,directories=no,status=no,scrollbars=yes,resizable=no,menubar=no")
}

</script>
</HEAD>

<BODY>

<p>
<form>Click here to open <br><input type=button value="a reference calendar" onClick="ref()"></form></p>
</center>
<p><b>Event input suggestions:</b> If the event has an explanation, give it a brief title, followed by a colon (:), followed by the explanation. Separate events by typing <br> between the end of one event and the beginning of the next event (this puts the new event on its own line). HTML codes for bold and italic will also work.</p>
<BR>
<form name="calendar_form">
<table border="2" cellpadding="1" cellspacing="1" width="100%" bgcolor="#eeeeee">
<tr>
<td>

</td>
<td>Choose a month: <select name="which_month">
<option>select one</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<BR><font size="1">Adjusts for # of days/month.</font>
</td>

<td>
Day that the month starts on: <select name="which_day">
<option>Select Day:
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<BR><font size="1">Use Ref. Cal. above to find day.</font>
</td>
<td>
The four-digit year for this calendar is:
<input type="text" size="4" maxlength="4" name="year" value="2003"><BR><font size="1">This can be changed as needed.</font>
</td>
</tr>

<tr>
<td><font size="2">What happens on the 1st? </font><textarea name="on_1" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 2nd? </font><textarea name="on_2" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 3rd? </font><textarea name="on_3" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 4th? </font><textarea name="on_4" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 5th? </font><textarea name="on_5" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 6th? </font><textarea name="on_6" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 7th? </font><textarea name="on_7" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 8th? </font><textarea name="on_8" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 9th? </font><textarea name="on_9" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 10th? </font><textarea name="on_10" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 11th? </font><textarea name="on_11" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 12th? </font><textarea name="on_12" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 13th? </font><textarea name="on_13" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 14th? </font><textarea name="on_14" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 15th? </font><textarea name="on_15" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 16th? </font><textarea name="on_16" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 17th? </font><textarea name="on_17" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 18th? </font><textarea name="on_18" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 19th? </font><textarea name="on_19" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 20th? </font><textarea name="on_20" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 21st? </font><textarea name="on_21" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 22nd? </font><textarea name="on_22" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 23th? </font><textarea name="on_23" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 24th? </font><textarea name="on_24" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 25th? </font><textarea name="on_25" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 26th? </font><textarea name="on_26" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 27th? </font><textarea name="on_27" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 28th? </font><textarea name="on_28" rows="2" cols="15"></textarea></td>
</tr>

<tr>
<td><font size="2">What happens on the 29nd? </font><textarea name="on_29" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 30th? </font><textarea name="on_30" rows="2" cols="15"></textarea></td>
<td><font size="2">What happens on the 31st? </font><textarea name="on_31" rows="2" cols="15"></textarea></td>
<td></td>
</tr>
</table>

<font face="Arial,Helvetica">
<table><tr><td width="300">
<b>Color for background of page:</b><BR>                        #<input type="text" size="6" maxlength="6" name="color1" value="000000"><br>
<b>Color for text outside of calendar:</b><BR>                        #<input type="text" size="6" maxlength="6" name="color2" value="dddddd"><br>
<b>Color of the calendar cells:</b><BR>                        #<input type="text" size="6" maxlength="6" name="color3" value="ffffff"><br>
<b>Color for text inside of calendar:</b><BR>                        #<input type="text" size="6" maxlength="6" name="color4" value="000000"></br>
</td><td valign=top>
<p><b>Choose your first choice for the text font:</b><br>
<input type="radio" name="font1" value="Arial" checked><font face="Arial">Arial</font>    <input type="radio" name="font1" value="Comic Sans MS"><font face="Comic Sans MS">Comic Sans MS</font>    <input type="radio" name="font1" value="Trebuchet MS"><font face="Trebuchet MS">Trebuchet MS</font>    <input type="radio" name="font1" value="Verdana"><font face="Verdana">Verdana</font><br>
<input type="radio" name="font1" value="Arial Black"><font face="Arial Black">Arial Black</font>    <input type="radio" name="font1" value="Impact"><font face="Impact">Impact</font><br>
<input type="radio" name="font1" value="Courier New"><font face="Courier New">Courier New</font>    <input type="radio" name="font1" value="Georgia"><font face="Georgia">Georgia</font>   <input type="radio" name="font1" value="Times New Roman"><font face="Times New Roman">Times New Roman</font><br>
</td><td valign=top>
<p><b>Choose your second choice for the text font:</b><br>
<input type="radio" name="font2" value="Arial"><font face="Arial">Arial</font>    <input type="radio" name="font2" value="Comic Sans MS"><font face="Comic Sans MS">Comic Sans MS</font>    <input type="radio" name="font2" value="Trebuchet MS"><font face="Trebuchet MS">Trebuchet MS</font>    <input type="radio" name="font2" value="Verdana" checked><font face="Verdana">Verdana</font><br>
<input type="radio" name="font2" value="Arial Black"><font face="Arial Black">Arial Black</font>    <input type="radio" name="font2" value="Impact"><font face="Impact">Impact</font><br>
<input type="radio" name="font2" value="Courier New"><font face="Courier New">Courier New</font>    <input type="radio" name="font2" value="Georgia"><font face="Georgia">Georgia</font>   <input type="radio" name="font2" value="Times New Roman"><font face="Times New Roman">Times New Roman</font><br>
</td>
</tr>

<tr><td><br><font size=2><b>** Use Hex. codes for colors </b>- do not include the # symbol<BR>   Ex: 000000 = black   ffffff = White   0000ff = blue   ff0000 = red   cccccc = gray</font></td><td align=center colspan=2><p>Clicking the "New Calendar" button will clear this form.</p>
<p><input type="button" value="make calendar" onClick="make();"> <input type="reset" value="new calendar"></p></td></tr>
</table>

</font>
</form>
<p>To save the calendar that you have just made to your hard-drive, do the following steps:<BR><BR>
<b>(Using Windows Operating Systems)</b><br>
1) Use the mouse to "right click" on the calendar page you just created. <br>
2) In the popup list choose "View Source" or "View Page Source."<br>
3) A little text file will open up - click on "File" in the toolbar of that new file. <br>
4) Select "Save As" - Use the "Save in" dropdown window to find a good place on your hard-drive to save the file in so you can find it later. <br>
5) While still in the Save As window, give the file a name like "January2003.html" (make sure to use the quotes around the file name and include the .html or .htm inside the quotes).<br>
6) Click "Save" button. <br>
7) Go to the directory that you saved the html file in. <br>
8) Right click on the file and use the "Open With" to find your browser type. <br>
9) If you have a newer version of Word on your computer, you may also be able to open the document in Word (after it has been saved). In Word, you can edit information that you might want changed on the calender at a later date (something you can't easily do with an html file). To do this, to highlight the calendar (Edit -> Select All + Edit -> Copy) and paste it into a new Word document window. Not all computers have the newer Word versions, so this last choice may not work for everyone. <br>
</p>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Event Calendar 2

Leave a Response

Attention JavaScript Coders

Go Deeper