Home
Time and Date
Deluxe Calendar Generator
This calendar script allows the user to change titles, fonts, and colors, plus it adds links, gives instructions, and creates a new page to be saved. Based on an older script by
Matthew D. Krieg.
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 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.
The JavaScript Source: Time and Date: Deluxe Calendar Generator
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 DELUXE CALENDAR GENERATOR:
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: Nikola Vrtis (nikki@vrtisworks.com ) Matthew D. Krieg (battlebots102001@yahoo.com) -->
<!-- Web Site: http://www.vrtisworks.com/kiki/ -->
<SCRIPT LANGUAGE="JavaScript">
function make()
{
var days = new Array("","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
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 += window.document.calendar_form.name.value;
code += "Events in ";
var month = window.document.calendar_form.which_month.options[window.document.calendar_form.which_month.selectedIndex].text;
code += month;
code += " ";
code += window.document.calendar_form.year.value;
code += "</title></head>\n<body bgcolor=\"";
code += window.document.calendar_form.color1.value;
code += "\">\n";
code += "<center>";
code += "<p><font size=\"8pt\" color=\"#";
code += window.document.calendar_form.color2.value;
code += "\" face=\"" + font1 + "," + font2 + "\">";
code += window.document.calendar_form.name.value;
code += "<br>\n";
code += month;
code += " ";
code += window.document.calendar_form.year.value;
code += "<br>\n";
code += window.document.calendar_form.prod.value;
code += " Events</font></p>\n";
code += "<p><font size=\"3pt\" color=\"#";
code += window.document.calendar_form.color2.value;
code += "\" face=\"" + font1 + "," + font2 + "\"><a href=\"";
code += window.document.calendar_form.sect.value;
code +="\">Return to Area Home Page</a> ¦¦ <a href=\"";
code += window.document.calendar_form.home.value;
code += "\">Return to Site Home Page</a></font></p>\n";
code += "<table width=\"100%\" cellpadding=\"3\" cellspacing=\"1\" border=\"2\" bgcolor=\"#";
code += window.document.calendar_form.color3.value;
code += "\">\n";
var num_of_days = parseInt(window.document.calendar_form.how_many_days.options[window.document.calendar_form.how_many_days.selectedIndex].text);
var loop = 0;
var day_loop = window.document.calendar_form.which_day.selectedIndex;
while(loop<num_of_days)
{
if(day_loop >= days.length)
{ day_loop = 1; }
loop++;
code += "<tr>\n";
code += "<td width=\"25%\">";
code += "<font color=\"#";
code += window.document.calendar_form.color4.value;
code += "\" size=\"4pt\" face=\"" + font1 + "," + font2 + "\">";
code += days[day_loop];
code += " ~ ";
code += window.document.calendar_form.which_month.selectedIndex;
code += "/";
code += loop;
code += "/";
code += window.document.calendar_form.year.value;
code += "</font>";
code += "</td>\n";
code += "<td>";
code += "<font color=\"#";
code += window.document.calendar_form.color4.value;
code += "\" size=\"4pt\" face=\"" + font1 + "," + font2 + "\">";
code += window.document.calendar_form.elements[loop+2].value;
code += " </font>";
code += "</td>\n";
code += "</tr>\n";
day_loop++;
}
code += "</table>\n";
code += "<p><font size=\"3pt\" color=\"#";
code += window.document.calendar_form.color2.value;
code += "\" face=\"" + font1 + "," + font2 + "\"><a href=\"";
code += window.document.calendar_form.sect.value;
code +="\">Return to Area Home Page</a> ¦¦ <a href=\"";
code += window.document.calendar_form.home.value;
code += "\">Return to Site Home Page</a></font></p>\n";
code += "</center>\n";
code += "<p><font color=\"#";
code += window.document.calendar_form.color2.value;
code += "\" size=\"4pt\" face=\"" + font1 + "," + font2 + "\">";
code += window.document.calendar_form.note.value;
code += "</font></p>\n";
code += "<p><font color=\"#";
code += window.document.calendar_form.color2.value;
code += "\" size=\"2pt\" face=\"" + font1 + "," + font2 + "\">Created with a calendar generator originally coded by Matthew D. Krieg (battlebots102001@yahoo.com) and modified by Nikola Vrtis (nikki@vrtisworks.com). The calendar generator and other scripts can be found at The JavaScript Source (www.javascriptsource.com).</font></p></body></html>\n";
msgWindow=window.open("","displayWindow","toolbar=yes,width=640,height=480,directories=no,status=no,scrollbars=yes,resize=yes,menubar=yes");
msgWindow.document.write(code);
msgWindow.document.close();
}
function regular() {
window.open("http://www.vrtisworks.com/kiki/fun/minical.htm","newWindow","toolbar=no,width=300,height=400,directories=no,status=no,scrollbars=yes,resize=yes,menubar=no")
}
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<!-- Original: Nikola Vrtis (nikki@vrtisworks.com ) -->
<!-- Web Site: http://www.vrtisworks.com/kiki/ -->
<form>Click here to open <input type=button value="a reference calendar" onClick="regular()"></form></p>
<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>
</font>
<form name="calendar_form">
<table border="2" cellpadding="1" cellspacing="1" width="100%" bgcolor="#eeeeee">
<tr>
<td>Choose a month: <select name="which_month">
<option>select one
<option>January
<option>February
<option>March
<option>April
<option>May
<option>June
<option>July
<option>August
<option>September
<option>October
<option>November
<option>December
</select></td>
<td>Number of days that month: <select name="how_many_days">
<option>select one
<option>31
<option>30
<option>29
<option>28
</select></td>
<td>Day that the month starts on: <select name="which_day">
<option>select one
<option>Sunday
<option>Monday
<option>Tuesday
<option>Wednesday
<option>Thursday
<option>Friday
<option>Saturday
</select></td>
</tr>
<tr>
<td>What happens on the 1st? <textarea name="on_1" rows="3" cols="25"></textarea></td>
<td>What happens on the 2nd? <textarea name="on_2" rows="3" cols="25"></textarea></td>
<td>What happens on the 3rd? <textarea name="on_3" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 4th? <textarea name="on_4" rows="3" cols="25"></textarea></td>
<td>What happens on the 5th? <textarea name="on_5" rows="3" cols="25"></textarea></td>
<td>What happens on the 6th? <textarea name="on_6" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 7th? <textarea name="on_7" rows="3" cols="25"></textarea></td>
<td>What happens on the 8th? <textarea name="on_8" rows="3" cols="25"></textarea></td>
<td>What happens on the 9th? <textarea name="on_9" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 10th? <textarea name="on_10" rows="3" cols="25"></textarea></td>
<td>What happens on the 11th? <textarea name="on_11" rows="3" cols="25"></textarea></td>
<td>What happens on the 12th? <textarea name="on_12" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 13th? <textarea name="on_13" rows="3" cols="25"></textarea></td>
<td>What happens on the 14th? <textarea name="on_14" rows="3" cols="25"></textarea></td>
<td>What happens on the 15th? <textarea name="on_15" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 16th? <textarea name="on_16" rows="3" cols="25"></textarea></td>
<td>What happens on the 17th? <textarea name="on_17" rows="3" cols="25"></textarea></td>
<td>What happens on the 18th? <textarea name="on_18" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 19th? <textarea name="on_19" rows="3" cols="25"></textarea></td>
<td>What happens on the 20th? <textarea name="on_20" rows="3" cols="25"></textarea></td>
<td>What happens on the 21st? <textarea name="on_21" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 22nd? <textarea name="on_22" rows="3" cols="25"></textarea></td>
<td>What happens on the 23th? <textarea name="on_23" rows="3" cols="25"></textarea></td>
<td>What happens on the 24th? <textarea name="on_24" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 25th? <textarea name="on_25" rows="3" cols="25"></textarea></td>
<td>What happens on the 26th? <textarea name="on_26" rows="3" cols="25"></textarea></td>
<td>What happens on the 27th? <textarea name="on_27" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 28th? <textarea name="on_28" rows="3" cols="25"></textarea></td>
<td>What happens on the 29th? <textarea name="on_29" rows="3" cols="25"></textarea></td>
<td>What happens on the 30th? <textarea name="on_30" rows="3" cols="25"></textarea></td>
</tr>
<tr>
<td>What happens on the 31st? <textarea name="on_31" rows="3" cols="25"></textarea></td>
<td colspan="2"><p><b>The four-digit year for this calendar is:</b><input type="text" size="4" maxlength="4" name="year"></p>
</td>
</tr>
</table>
<font face="Arial,Helvetica">
<p><b>The name of the company or organization:</b> <input type="text" size="20" name="name"><br><i>Note: OK to leave blank, but the title of the calendar will be a line lower than normal.</i></p>
<p><b>These events are for this product or service type:</b> <input type="text" size="20" name="prod"><br><i>Note: Use the singular form; leave blank if not associated with a product or service.</i></p>
<p><b>The index page of this Web site:</b> <input type="text" size="10" name="home"><br><i>Note: If the index page located in a different directory, you'll need to include that information; if you're not sure how to do that, put in the full URL of the index page, but do not include the <b>http://</b> .</i></p>
<p><b>This page is associated with this area of the Web site:</b> <input type="text" size="10" name="sect"><br><i>Note: Type in the area's home page name.</i></p>
<p><b>Text for the bottom of the calendar page:</b> <input type="text" size="30" name="note"><br><i>Note: Include here any copyright information or contact information for your Web site; you may use HTML, but all <b>"</b> should be written as <b>\"</b> .</i></p>
<p><i>Note: For the following color options, type in the hexadecimal code; do not include the # sign. Keep in mind that unvisited links will be blue and visited links will be purple - so if you pick 0000CC as your page background, the unvisited links will be invisible, and if you pick 660099 as your page background, the visited links will be invisible. If you need helping choosing colors, <a href="http://www.vrtisworks.com/kiki/fun/color.htm" target="_blank">please open this page</a> (a new page will open in front of this one).</i><br>
<b>Color for background of page:</b><input type="text" size="6" maxlength="6" name="color1"><br>
<b>Color for text outside of calendar:</b><input type="text" size="6" maxlength="6" name="color2"><br>
<b>Color of calendar:</b><input type="text" size="6" maxlength="6" name="color3"><br>
<b>Color for text inside of calendar:</b><input type="text" size="6" maxlength="6" name="color4"></p>
<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>
<i>Note: Fonts have been grouped by similarity. If two selections look the same, that means that you do not have one or more fonts installed. (Chances are that the missing fonts will look like Times New Roman or Arial.)</i></p>
<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"><font face="Verdana" checked>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>
<i>Note: Your second font should be selected from the same group as your first font. The second font only shows up if the first font is not on the viewer's computer.</i></p>
<p><b>Internet Explorer (PC) Instructions:</b> When you press "Make Calendar," the calendar will be generated in a new window. Check to make sure there are no errors. If there are any errors, come back to this window and make the changes; then press "Make Calendar" again. If the calendar is all right, then go to the File menu at the top of the calendar page, then select Save As. Make certain under "Save as type:" the type is "Web Page, HTML only (*.htm,*.html)". Name the document the correct name with .htm or .html as the extension, make sure you know where you can find the file, and click on Save. Once you have saved the file, upload to your Web site in the same directory as the area home page.</p>
<p><b>Netscape (PC) Instructions:</b> When you press "Make Calendar," the calendar will be generated in a new window. Check to make sure there are no errors. If there are any errors, come back to this window and make the changes; then press "Make Calendar" again. If the calendar is all right, then go to the File menu at the top of the calendar page, then select Save As. Make certain under "Save as type:" the type is "Plain Text (*.txt)". Name the document the correct name with .htm or .html as the extension, make sure you know where you can find the file, and click on Save. Once you have saved the file, upload to your Web site in the same directory as the area home page.</p>
<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>
</font>
</form>
<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: 18.00 KB --> Did you use this script? Do you like this site? Please link to us!
Comments feed