Home
Time and Date
Event Calendar 2
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.
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 -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: J McCaul (entiempo@ziplip.com) -->
<!-- Web Site: http://www.lunarliving.org -->
<!-- Redesigned by J McCaul from Deluxe Calendar by Nikola Vrtis (nikki@vrtisworks.com ) and Matthew D. Krieg (battlebots102001@yahoo.com) -->
<SCRIPT LANGUAGE="JavaScript">
function make() {
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>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: J McCaul (entiempo@ziplip.com) -->
<!-- Web Site: http://www.lunarliving.org -->
<!-- Redesigned by J McCaul from Deluxe Calendar by Nikola Vrtis (nikki@vrtisworks.com ) and Matthew D. Krieg (battlebots102001@yahoo.com) -->
<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>
<!--
blank
-->
</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><!-- blank --></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>
<!-- Script Size: 19.16 KB --> Did you use this script? Do you like this site? Please link to us!
Comments feed