I need to write a calendar script in JavaScript (no back-end technology available) that will:
1. be a one-month calendar, with current month displayed and links or options field to provide the possibility to change the Month displayed to another Month,
2. Each day linked to a specific folder. The folder links are created dynamically, dependingon the date, such as:
<a href="\\Remmysrv\Remmy\200
5\October\
OCT-25">25
</a>
3. The calendar will be in the top or left frame, displaying the folderin the right or bottom frame.
I am not as proficient in JavaScript as I would like to be, because Iam doing most of my stuff in Perl. Unfortunately, I am in no position to install any back-end technologies in this case, and also I have to work with the existing folder structure. The "server" is a windows 2003 computer on a network with the existing file structure, no server technology implemented.
I have come this far but if any one has a better idea, please let me know. This is a script I've found somewhere on the Net and kept modifying it. The probem is, I am having problems implementing swithing to other month. I get the same days as in the currentMonth, starting with the same day as the first. (September will start with Sunday as the first of theMonth,, so will October, December, November, etc...).
TIA
~Lil
Javascript file:
function openWin(day) {
aWindow=window.open("days/
" + day + ".htm", "Title", "width=850,height=300,resi
zable,scro
llbars,men
ubar,toolb
ar");
aWindow.focus()
}
function makeArray(len) {
for (var i = 0; i < len; i++) this[i] = null;
this.length = len;
}
function arrayOfDaysInMonths(isLeap
Year)
{
this[0] = 31;
this[1] = 28;
if (isLeapYear)
this[1] = 29;
this[2] = 31;
this[3] = 30;
this[4] = 31;
this[5] = 30;
this[6] = 31;
this[7] = 31;
this[8] = 30;
this[9] = 31;
this[10] = 30;
this[11] = 31;
}
function daysInMonth(month, year)
{
// do the classic leap year calculation
var isLeapYear = (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0));
var monthDays = new arrayOfDaysInMonths(isLeap
Year);
return monthDays[month];
}
function calendar()
{
var monthNames = "JANFEBMARAPRMAYJUNJULAUGS
EPOCTNOVDE
C";
var mo = new Array("JAN","FEB","MAR","A
PR","MAY",
"JUN","JUL
","AUG","S
EP","OCT",
"NOV","DEC
");
var fullMonth = new Array("January","February"
,"March","
April","Ma
y","June",
"July","Au
gust","Sep
tember","O
ctober","N
ovember","
December")
;
var today = new Date();
var day0 = today.getDate();
var day = '';
if(day0 < 10) { day = ("0" + day0) } else { (day0 = day); }
var month = today.getMonth();
var year = today.getYear();
// figure out how many days this month will have...
var numDays = daysInMonth(month, year);
// and go back to the first day of the month...
var firstDay = today;
firstDay.setDate(1);
// and figure out which day of the week it hits...
var startDay = firstDay.getDay();
var column = 0;
// Start the calendar table
// Something like:
// | JUL 96 |
// |Sun|Mon|Tue|Wed|Thu|Fri|S
at|
// document.write("<CENTER>")
;
document.write("<TABLE BORDER=0 width=210>");
document.write("<TR><TH COLSPAN=7>");
document.write(monthNames.
substring(
3*month, 3*(month + 1)) + " " + year);
document.write("<TR><TH>SU
<TH>MO<TH>
TU<TH>WE<T
H>TH<TH>FR
<TH>SA");
// put blank table entries for days of week before beginning of the month
document.write("<TR>");
for (i = 0; i < startDay; i++)
{
document.write("<TD>");
column++;
}
for (i=1; i <= numDays; i++)
{
var s = "" + i;
if ( i < 10 )
{
// Write the day
s = ("0" + i);
}
else
{
// Write the day
s = i;
}
// s = s.link("javascript:openWin
(" + i + ")")
document.write("<TD>" + "<a target=data href=\\\\Remmysrv\\Remmy\\
" + year + "\\" + fullMonth[month] + "\\" + mo[month] + "-" + s +">" + s + "</a>");
// Check for end of week/row
if (++column == 7)
{
document.write("<TR>"); // start a new row
column = 0;
}
}
document.write("</TABLE>")
;
}
Frameset:
<frameset cols="25%,75%">
<frame src="menu.html" name="menu" width="220" scrolling="No" noresize marginwidth="0" marginheight="0" bordercolor="#6A8095">
<frame src="data.html" name="data" scrolling="Auto" noresize marginwidth="0" marginheight="0"></framese
t>
Left frame:
<HTML>
<HEAD>
<script type="text/javascript" src="fco.js"></script>
<TITLE>James Thiele's Calendar reminders
</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- to hide script contents from old browsers
// Write the intro
// Write the calendar
calendar();
// --> <!-- end hiding contents from old browsers -->
//
</SCRIPT>
</BODY>
</HTML>
Right frame:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" bgcolor="#ff0000">
<img src="img/sp.gif" width="400" height="20" border="0"> <br>
Here is the folder list
</body>
</html>