This script generates code for an event calendar instead of having to do the tedious task of making one each month. This completely simplifies the table making involved. Just punch in your data and cut and paste the code.
- Copy the coding into the HEAD of your HTML document
- Add the last code into the BODY of your HTML document
<!– STEP ONE: Paste this code into the HEAD of your HTML document –>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
<!– This script and many more are available free online at –>
<!– The JavaScript Source!! http://javascriptsource.com –>
<!– Original: Matthew D. Krieg ([email protected]) –>
<!– Web Site: http://geocities.com/battlebots102001/javascript_gizmos/index.htm –>
<!– Begin
function make()
{
var days = new Array(“”,”Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday”);
var code = “”;
code += “<center>”;
code += “<font size=”10pt” color=”#ff00CC”>”;
var month = window.document.calendar_form.which_month.options[window.document.calendar_form.which_month.selectedIndex].text;
code += month;
code += “</font>”;
code += “</center>n”;
code += “<table width=”100%” cellpadding=”3″ cellspacing=”1″ border=”2″ bgcolor=”#EEEEEE”>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=”0%”>”;
code += “<font color=”#009900″ size=”4pt” family=”ariel”>”
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=”#009900″ size=”4pt” family=”ariel”>”;
code += window.document.calendar_form.elements[loop+2].value;
code += “</font>”;
code += “</td>n”;
code += “</tr>n”;
day_loop++;
}
code += “</table>”;
window.document.calendar_form.source_code.value = code;
}
// End –>
</script>
</HEAD><!– STEP TWO: Copy this code into the BODY of your HTML document –>
<BODY>
<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>how many days in that month<select name=”how_many_days”>
<option>select one
<option>31
<option>30
<option>29
<option>28
</select>
</td>
<td>Which day does that start 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></td>
<td></td>
</tr>
</table>
<center>
<h2>The Year Is:<input type=”text” size=”4″ name=”year” value=”????”></h2>
<textarea rows=”20″ cols=80″ name=”source_code”>
The source code will appear here
</textarea><hr>
<input type=”button” value=”make calendar” onClick=”make();”>
<input type=”button” value=”higlight all” onClick=”window.document.calendar_form.source_code.select();”>
<input type=”reset” value=”new calendar”>
</center>
</form>
<p><center>
<font face=”arial, helvetica” size”-2″>Free JavaScripts provided<br>
by <a href=”https://javascriptsource.com”>The JavaScript Source</a></font>
</center><p>