Javascript Archive Calendar
Hey guys, I am trying to make an archive calendar, where if a particular day is clicked, then it opens a popup window and displays a particular image. So far, I can't get the window.open function to open the window in the size I specific. Also I have no idea how to make arrays work in javascript to pass the information around. Could someone help?
here is my code so far...
//Constructor
function calendar(id,d,p){
this.id = id;
this.dateObject = d;
this.pix = p;
this.write = writeCalendar;
this.length = getLength;
this.month = d.getMonth();
this.date = d.getDate();
this.day = d.getDay();
this.year = d.getFullYear();
this.getFormattedDate = getFormattedDate;
//get the first day of the month's day
d.setDate(1);
this.firstDay = d.getDay();
//then reset the date object to the correct date
d.setDate(this.date);
}
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
var comic_arr = new Array(1);
comic_arr[1] = "dok1.jpg";
function getFormattedDate(){
return days[this.day] + ', ' + months[this.month] + ' ' + this.date + ', ' + this.year;
//return this.month + '/' + this.date + '/' + this.year;
}
function writeCalendar(){
var calString = '<div id="calContainer">';
//write month and year at top of table
calString += '<table id="cal' + this.id + '" cellspacing="0" width="200" style="border:1px black solid;">';
//write the image comment out to hide images
//calString += '<tr><th colspan="7"><img src="' + this.pix[this.month].src + '"/></th></tr>';
//write the month
calString += '<tr><th colspan="7" class="month">' + months[this.month] + ', ' + this.year + '</th></tr>';
//write a row containing days of the week
calString += '<tr>';
for(i=0;i<days.length;i++){
calString += '<th class="dayHeader">' + days[i].substring(0,3) + '</th>';
}
//write the body of the calendar
calString += '<tr>';
//create 6 rows so that the calendar doesn't resize
for(j=0;j<42;j++){
var displayNum = (j-this.firstDay+1);
if(j<this.firstDay){
//write the leading empty cells
calString += '<td class="empty"> </td>';
}else if(displayNum==this.date){
calString += '<td id="' + this.id +'selected" class="date" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
}else if(displayNum > this.length()){
//Empty cells at bottom of calendar
calString += '<td> </td>';
}else{
//the rest of the numbered cells
calString += '<td id="" class="days" onClick="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
}
if(j%7==6){
calString += '</tr><tr>';
}
}
//close the last number row
calString += '</tr>';
//write the nav row
calString += '<tr>';
calString += '<td class="nav" style="text-decoration:underline;" onClick="changeMonth(-12,\'' + this.id + '\')"><</td>';
calString += '<td class="nav" onClick="changeMonth(-1,\'' + this.id + '\')"><</td>';
calString += '<td class="month" colspan="3"> </td>';
calString += '<td class="nav" onClick="changeMonth(1,\'' + this.id + '\')">></td>';
calString += '<td class="nav" style="text-decoration:underline;text-align:right;" onClick="changeMonth(12,\'' + this.id + '\')">></td>';
calString += '</tr>';
calString += '</table>';
calString += '</div>';
return calString;
}
function getLength(){
//thirty days has September...
switch(this.month){
case 1:
if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
return 29; //leap year
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
function changeDate(td,cal){
cal = eval(cal);
document.getElementById(cal.id + "selected").className = "days";
document.getElementById(cal.id + "selected").id = "";
td.className = "date";
td.id = cal.id + "selected";
//set the calendar object to the new date
cal.dateObject.setDate(td.firstChild.nodeValue);
cal = new calendar(cal.id,cal.dateObject,cal.pix);
//here is where you could react to a date change - I'll just display the formatted date
//alert('poop on you');
window.open("http://www.v7comics.com/comics/dok1.jpg", height=323, width=600);
//window.open("http://www.v7comics.com/comics/" + comic_arr[1] + ", "Devil", status=1, height=323, width=600);
}
function changeMonth(mo,cal){
cal = eval(cal);
cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
cal = new calendar(cal.id,cal.dateObject,cal.pix);
cal.formattedDate = cal.getFormattedDate();
document.getElementById('calContainer').innerHTML = cal.write();
}
# 1 Re: Javascript Archive Calendar
Have a look at this one. It draws table cells, and inside it insert the day numbers for the months, based on a selection of Month Name and Year. It also enables you to browse through the months with the -> and <- buttons.
NOTE: IT IS NOT Perfect, it might throw an error here and there - but you could still see how to work with arrays.
<HTML>
<HEAD>
<TITLE>Monthly Calendar</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide JS code
function drawCurrMonth(form) // display current month in table
{
makeMonthArray()
var today = new Date()
var currYearIndex = today.getYear() - 95
var currMonthIndex = today.getMonth()
form.selYear.selectedIndex = currYearIndex
form.selMonth.selectedIndex = currMonthIndex
drawCal(form)
}
function makeMonthArray() // create array of 12 month objects
{
months = new makeArray(12)
months[1] = new month("January", 31, 0)
months[2] = new month("February", 28, 1)
months[3] = new month("March", 31, 2)
months[4] = new month("April", 30, 3)
months[5] = new month("May", 31, 4)
months[6] = new month("June", 30, 5)
months[7] = new month("July", 31, 6)
months[8] = new month("August", 31, 7)
months[9] = new month("September", 30, 8)
months[10] = new month("October", 31, 9)
months[11] = new month("November", 30, 10)
months[12] = new month("December", 31, 11)
}
function makeArray(arrayLength) // create empty array
{
this.length = arrayLength
for (var i = 1; i <= arrayLength; i++)
this[i] = 0
return this
}
function month(name, length, index) // create month object
{
this.name = name // properties
this.length = length
this.index = index
this.getFirstMonthDay = getFirstMonthDay // method
}
function getFirstMonthDay(theYear) // get week-day of first day of month
{
var firstDay = new Date(theYear, this.index, 1)
return firstDay.getDay()
}
function drawCal(form) // draw day numbers in cal table
{
var theYear = form.selYear.options[form.selYear.selectedIndex].text
var monthIndex = form.selMonth.selectedIndex + 1
if (monthIndex == 2)
months[2].length = getNumFebDays(theYear - 1900)
var firstMonthDay = months[monthIndex].getFirstMonthDay(theYear - 1900)
var numMonthDays = months[monthIndex].length
for (var i = 0; i < 42; i++)
if (i < firstMonthDay || i >= (numMonthDays + firstMonthDay))
form.dayBox[i].value = ""
else
form.dayBox[i].value = i - firstMonthDay + 1
}
function drawPrevMonth(form)
{
var prevMonthIndex = form.selMonth.selectedIndex - 1
if (prevMonthIndex == -1) // prev month December?
{
var prevYearIndex = form.selYear.selectedIndex - 1
if (prevYearIndex == -1) // prev year before 1995?
{
alert("Sorry, you cannot display any months before 1995!")
return
}
else // set month to Dec, sub 1 from year
{
form.selMonth.selectedIndex = 11
form.selYear.selectedIndex = prevYearIndex
}
}
else // set month to prev month
form.selMonth.selectedIndex = prevMonthIndex
drawCal(form)
}
function drawNextMonth(form)
{
var nextMonthIndex = form.selMonth.selectedIndex + 1
if (nextMonthIndex == 12) // next month January?
{
var nextYearIndex = form.selYear.selectedIndex + 1
if (nextYearIndex >= form.selYear.length) // next year after 1999?
{
alert("Sorry, you cannot display any months after 1999!")
return
}
else // set month to Jan, add 1 to year
{
form.selMonth.selectedIndex = 0
form.selYear.selectedIndex = nextYearIndex
}
}
else // set month to next month
form.selMonth.selectedIndex = nextMonthIndex
drawCal(form)
}
function getNumFebDays(theYear) // calc num days in February
{
if ((theYear % 4 == 0 && theYear % 100 != 0) || theYear % 400 == 0)
return 29
else
return 28
}
// end JS hide -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="teal" TEXT="black" onLoad="drawCurrMonth(document.calForm)">
<SCRIPT LANGUAGE="JavaScript"> // create HTML string to generate table
<!-- hide JS code
var dayField = "<INPUT TYPE='text' NAME='dayBox' SIZE=2>"
var tableCode = "<FORM NAME='calForm'><CENTER><TABLE>" // start table
tableCode += "<TR><TH><FONT COLOR='silver'>Sun</FONT></TH>" // do day headers
tableCode += "<TH>Mon</TH><TH>Tue</TH><TH>Wed</TH><TH>Thu</TH><TH>Fri</TH>"
tableCode += "<TH><FONT COLOR='silver'>Sat</FONT></TH></TR>"
tableCode += "<TR>" // do day cells (using for loop)
for (var i = 1; i < 43; i++)
{
if (i % 7 == 1 || i % 7 == 0)
tableCode += "<TD BGCOLOR='silver'>" + dayField + "</TD>"
else
tableCode += "<TD>" + dayField + "</TD>"
if (i == 42)
tableCode += "</TR>"
else if (i % 7 == 0)
tableCode += "</TR><TR>"
}
tableCode += "</TABLE><BR>" // end table
document.write(tableCode) // generate table
// end JS hide -->
</SCRIPT>
<SELECT NAME="selMonth">
<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>
<SELECT NAME="selYear">
<OPTION>1995
<OPTION>1996
<OPTION>1997
<OPTION>1998
<OPTION>1999
</SELECT><P>
<INPUT TYPE="button" VALUE="<-" onClick="drawPrevMonth(this.form)">
<INPUT TYPE="button" VALUE="New Month" onClick="drawCal(this.form)">
<INPUT TYPE="button" VALUE="This Month" onClick="drawCurrMonth(this.form)">
<INPUT TYPE="button" VALUE="->" onClick="drawNextMonth(this.form)"><P>
</CENTER>
</FORM>
</BODY>
</HTML>
Hope it helped a bit!
