...

View Full Version : My own Javascript Calendar used to work, now doesn't



ColourDreamer
04-17-2005, 06:18 PM
I took a script class last fall and as a project, I created my own calendar in javascript. It worked great! I put it up on my website, but then I stopped updating it and visiting it. I think it worked up until April. Now it doesn't! First thing, the year said 105. I put in getFullYear and now it's 2005. (Even though I read full year doesn't work for every browser, it seemed to work for all newer ones.)

See it here: http://colour-dreams.net (it's on the side, scrolling down a bit)

But then the dates won't show. They're blank. I added in two holidays, and they show, one week apart, like they should. But on Sunday spots (the 2nd and 3rd week).

That's all the information about what's visually wrong. I suppose I'll post my code now!

Here's the code for the whole file. It's put on the page by a PHP include.




<!-- October calendar table -->
<p align="center"><img src="/layout/divider.gif"><table width="100%" border="0" cellspacing="3" cellpadding="3" class="tableborder1">
<tr>
<td class="tablehead">
&nbsp;<img src="/images/linkimg_calendar.gif"> <b>Calendar</b> <a href="/members/scripts/calendars.php" target="content">get goodies</a>
</td>
</tr>
<tr>
<td align="center" class="tablebody">

<!-- BEGIN CALENDER!!!!!! -->

<script language="javascript" type="text/javascript">
// Copyright Lauren Noelle 11-30-2004 Colour Dreams "Today Calendar"
// may be used with credit link to http://colour-dreams.net

// required element
var Calendar = new Date();

// set how many days and table data cells in calendar
var monthDays = 31;
var weekDays = 7;

// variables, ties in with first var
var year = Calendar.getFullYear();
var month = Calendar.getMonth();
var today = Calendar.getDate();
var weekDay = Calendar.getDay();

// makes these names not just numbers, I've added pictures for a neat look
var dayNames = new Array("Su", "M", "Tu", "W", "Th", "F", "Sa");
var dayWord = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames = new Array("<img src='/pixels/calendar/snowflake.gif'>&nbsp;January","<img src='/pixels/calendar/heart3.gif'>&nbsp;February","<img src='/pixels/calendar/fourleafclover.gif'>&nbsp;March","<img src='/pixels/calendar/easteregg.gif'>&nbsp;April", "<img src='/pixels/calendar/springleaf.gif'>&nbsp;May","<img src='/pixels/calendar/summer.gif'>&nbsp;June","<img src='/pixels/calendar/summer.gif'> July","<img src='/pixels/calendar/summer.gif'>&nbsp;August", "<img src='/pixels/calendar/fallleaves.gif'>&nbsp;September","<img src='/pixels/calendar/jackolantern.gif'>&nbsp;October","<img src='/pixels/calendar/pumpkin.gif'>&nbsp;November","<img src='/pixels/calendar/mistletoe.gif'>&nbsp;December");
var monthWord = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

// sets calendar days besides today, important to leave after other variables, where it is now.
Calendar.setDate(1);

// table variables which are easiest not to repeat or mark inside calendar document writes
var TR = "<tr>";
var TD = "<td align=center width=23 height=20>";
var HL = "<td align=center width=23 height=20 class=hlDay>";
var closeHL = "</td>";
var Holiday = "<td colspan=7 align=center height=20>";

var presentPixel = "<img src=/pixels/calendar/bdaypresent.gif border=0>";
var schoolPixel = "<img src=/pixels/calendar/pencil.gif border=0>";
var blendPixel = "<img src=/images/linkimg_blend.gif border=0>";


// start calendar, notice the double variables with []
document.writeln("<TABLE><TR><TD>");
document.writeln("<Table width=100% border=0 cellpadding=0 cellspacing=0><Tr>");
document.writeln("<Td colspan=7 align=center><b>" + monthNames[month] + "</b><i>&nbsp;" + year + "</i></Td></Tr>");
document.writeln("<tr>");

// lists/prints the dayNames variables and highlights today's day-of-the-week
for (index=0; index < weekDays; index++)
{
document.writeln(TD + dayNames[index] + "</td>");
}

document.writeln("</tr><tr>");

// spaces until dates start
for (index=0; index < Calendar.getDay(); index++)
document.writeln(TD + "&nbsp;</td>");

// loops each day
for (index=0; index < monthDays; index++)
{
if (Calendar.getDate() > index)
{
// returns the next day to print
weekDay = Calendar.getDay();

// start new row for first day of week
if (weekDay == 0)
document.writeln(TR);

if (weekDay != weekDays)
{
// set variable inside loop for incrementing purposes
var day = Calendar.getDate();

// for each event

// you can even include pictures instead of the day number!
// you can add things for more years! I don't think you'd want to. But to do that, add if (year == 2005) above the if month

if (monthWord[month] == "October")
if (30 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "October")
if (31 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Halloween'>" + "<img src=/pixels/calendar/jackolantern.gif border=0>" + "</td>");

if (monthWord[month] == "November")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My BFF&#8217s Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "November")
if (23 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Jackie&#8217s Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "December")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# font class=today title='Made this Calendar'>" + day + "</td>");

if (monthWord[month] == "December")
if (7 == Calendar.getDate())
document.writeln(TD + "<a href=# title='IP Finale Exam'>" + schoolPixel + "</td>");

if (monthWord[month] == "December")
if (8 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Maghan&#8217s Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "December")
if (16 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Final Exams'>" + schoolPixel + "</td>");

if (monthWord[month] == "December")
if (21 == Calendar.getDate())
document.writeln(TD + "<a href=# title='First Day of Winter'>" + "<img src=/pixels/calendar/snowflake.gif border=0>" + "</td>");

if (monthWord[month] == "December")
if (24 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Christmas Eve'>" + "<img src=/pixels/calendar/mistletoe.gif border=0>" + "</td>");

if (monthWord[month] == "December")
if (25 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Christmas'>" + "<img src=/pixels/calendar/xmaspresent.gif border=0>" + "</td>");

if (monthWord[month] == "December")
if (Calendar.getDate() > 26)
if (Calendar.getDate() < 31)
document.writeln(TD + "<a href=# title='Visiting BFF in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");

if (monthWord[month] == "December")
if (31 == Calendar.getDate())
document.writeln(TD + "<a href=# title='New Years Eve in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");

if (monthWord[month] == "January")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# title='New Years in FLA'>" + "<img src=/pixels/calendar/party.gif border=0>" + "</td>");

if (monthWord[month] == "January")
if (Calendar.getDate() > 1)
if (Calendar.getDate() < 4)
document.writeln(TD + "<a href=# title='Visiting BFF in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");

if (monthWord[month] == "January")
if (4 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Coming Home'>" + "<img src=/pixels/smilies/basic/frown.gif border=0>" + "</td>");

if (monthWord[month] == "January")
if (5 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Challenges Closed'>" + blendPixel + "</td>");

if (monthWord[month] == "January")
if (14 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My Mom’s Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "April")
if (22 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Earth Day'>" + "<img src=/pixels/calendar/earth.gif border=0>" + "</td>");

if (monthWord[month] == "April")
if (29 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Arbor Day'>" + "<img src=/pixels/calendar/earth.gif border=0>" + "</td>");

// for every month you add a date, you have to add the month once and each date in, sorry! otherwise 'twill repeat.
// repeat one if month and if days and { print day } for EACH MONTH

// once (each month with dates)
if (monthWord[month] == "December")
// repeat each number for event dates ONLY (and in that month)
if (1 != Calendar.getDate())
if (7 != Calendar.getDate())
if (8 != Calendar.getDate())
if (16 != Calendar.getDate())
if (21 != Calendar.getDate())
if (24 != Calendar.getDate())
if (25 != Calendar.getDate())
if (27 != Calendar.getDate())
if (28 != Calendar.getDate())
if (29 != Calendar.getDate())
if (30 != Calendar.getDate())
if (31 != Calendar.getDate())
{
// prints day
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "January")

if (1 != Calendar.getDate())
if (2 != Calendar.getDate())
if (3 != Calendar.getDate())
if (4 != Calendar.getDate())
if (5 != Calendar.getDate())
if (14 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "January")

if (22 != Calendar.getDate())
if (29 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "October")

if (30 != Calendar.getDate())
if (31 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "November")

if (1 != Calendar.getDate())
if (23 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

}

// if day of week = 7 (Saturday), close the row
if (weekDay == weekDays)
document.writeln("</tr>");
}

// this must go below all date code, above event messages
Calendar.setDate(Calendar.getDate()+1);
}

document.writeln("</TABLE>");

</script>

</Td></Tr></Table> <!-- END CALENDAR!!!!! -->



Remember, this WAS working, and I was just a beginner student. Coding's not my thing, I'm a visual artist. Don't laugh. OKay, thanks.

Badman3k
04-17-2005, 09:01 PM
Okay I've got it to work, don't ask how, 'cause I don't know lol:D

When you add dates for other months don't forget to add the nested if statements like the ones in red (in the below code)

Hope this helps :thumbsup:



<!-- BEGIN CALENDER!!!!!! -->

<script language="javascript" type="text/javascript">
// Copyright Lauren Noelle 11-30-2004 Colour Dreams "Today Calendar"
// may be used with credit link to http://colour-dreams.net

// required element
var Calendar = new Date();

// set how many days and table data cells in calendar
var monthDays = 30;
var weekDays = 7;

// variables, ties in with first var
var year = Calendar.getFullYear();
var month = Calendar.getMonth();
var today = Calendar.getDate();
var weekDay = Calendar.getDay();


// makes these names not just numbers, I've added pictures for a neat look
var dayNames = new Array("Su", "M", "Tu", "W", "Th", "F", "Sa");
var dayWord = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var monthNames = new Array("<img src='/pixels/calendar/snowflake.gif'>&nbsp;January","<img src='/pixels/calendar/heart3.gif'>&nbsp;February","<img src='/pixels/calendar/fourleafclover.gif'>&nbsp;March","<img src='/pixels/calendar/easteregg.gif'>&nbsp;April", "<img src='/pixels/calendar/springleaf.gif'>&nbsp;May","<img src='/pixels/calendar/summer.gif'>&nbsp;June","<img src='/pixels/calendar/summer.gif'> July","<img src='/pixels/calendar/summer.gif'>&nbsp;August", "<img src='/pixels/calendar/fallleaves.gif'>&nbsp;September","<img src='/pixels/calendar/jackolantern.gif'>&nbsp;October","<img src='/pixels/calendar/pumpkin.gif'>&nbsp;November","<img src='/pixels/calendar/mistletoe.gif'>&nbsp;December");
var monthWord = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

// sets calendar days besides today, important to leave after other variables, where it is now.
Calendar.setDate(1);

// table variables which are easiest not to repeat or mark inside calendar document writes
var TR = "<tr>";
var TD = "<td align=center width=23 height=20>";
var HL = "<td align=center width=23 height=20 class=hlDay>";
var closeHL = "</td>";
var Holiday = "<td colspan=7 align=center height=20>";

var presentPixel = "<img src=/pixels/calendar/bdaypresent.gif border=0>";
var schoolPixel = "<img src=/pixels/calendar/pencil.gif border=0>";
var blendPixel = "<img src=/images/linkimg_blend.gif border=0>";


// start calendar, notice the double variables with []
document.writeln("<TABLE><TR><TD>");
document.writeln("<Table width=100% border=0 cellpadding=0 cellspacing=0><Tr>");
document.writeln("<Td colspan=7 align=center><b>" + monthNames[month] + "</b><i>&nbsp;" + year + "</i></Td></Tr>");
document.writeln("<tr>");

// lists/prints the dayNames variables and highlights today's day-of-the-week
for (index=0; index < weekDays; index++)
{
document.writeln(TD + dayNames[index] + "</td>");
}

document.writeln("</tr><tr>");

// spaces until dates start
for (index=0; index < Calendar.getDay(); index++)
document.writeln(TD + "-</td>");

// loops each day
for (index=0; index<=monthDays; index++)
{
if (Calendar.getDate() > index)
{
// returns the next day to print
weekDay = Calendar.getDay();

// start new row for first day of week

if (weekDay == 0) {
var day = Calendar.getDate();
document.writeln(TR);
document.writeln(TD + day + "</td>");
}
else if (weekDay != weekDays)
{
// set variable inside loop for incrementing purposes
var day = Calendar.getDate();

// for each event

// you can even include pictures instead of the day number!
// you can add things for more years! I don't think you'd want to. But to do that, add if (year == 2005) above the if month

if (monthWord[month] == "October")
if (30 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My Birthday'>" + presentPixel + "</td>");
else if (31 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Halloween'>" + "<img src=/pixels/calendar/jackolantern.gif border=0>" + "</td>");

if (monthWord[month] == "November")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My BFF&#8217s Birthday'>" + presentPixel + "</td>");
else if (23 == Calendar.getDate())

document.writeln(TD + "<a href=# title='Jackie&#8217s Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "December")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# font class=today title='Made this Calendar'>" + day + "</td>");
else if (7 == Calendar.getDate())
document.writeln(TD + "<a href=# title='IP Finale Exam'>" + schoolPixel + "</td>");
else if (8 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Maghan&#8217s Birthday'>" + presentPixel + "</td>");
else if (16 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Final Exams'>" + schoolPixel + "</td>");
else if (21 == Calendar.getDate())
document.writeln(TD + "<a href=# title='First Day of Winter'>" + "<img src=/pixels/calendar/snowflake.gif border=0>" + "</td>");
else if (24 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Christmas Eve'>" + "<img src=/pixels/calendar/mistletoe.gif border=0>" + "</td>");
else if (25 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Christmas'>" + "<img src=/pixels/calendar/xmaspresent.gif border=0>" + "</td>");
else if (Calendar.getDate() > 26 && Calender.getDate() < 31)
document.writeln(TD + "<a href=# title='Visiting BFF in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");
else if (31 == Calendar.getDate())
document.writeln(TD + "<a href=# title='New Years Eve in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");

if (monthWord[month] == "January")
if (1 == Calendar.getDate())
document.writeln(TD + "<a href=# title='New Years in FLA'>" + "<img src=/pixels/calendar/party.gif border=0>" + "</td>");
else if (Calendar.getDate() > 1 && Calendar.getDate() < 4)
document.writeln(TD + "<a href=# title='Visiting BFF in FLA'>" + "<img src=/pixels/calendar/friendship.gif border=0>" + "</td>");
else if (4 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Coming Home'>" + "<img src=/pixels/smilies/basic/frown.gif border=0>" + "</td>");
else if (5 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Challenges Closed'>" + blendPixel + "</td>");
else if (14 == Calendar.getDate())
document.writeln(TD + "<a href=# title='My Momís Birthday'>" + presentPixel + "</td>");

if (monthWord[month] == "April")
if (22 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Earth Day'>" + "<img src=/pixels/calendar/earth.gif border=0>" + "</td>");
else if (29 == Calendar.getDate())
document.writeln(TD + "<a href=# title='Arbor Day'>" + "<img src=/pixels/calendar/earth.gif border=0>" + "</td>");

// for every month you add a date, you have to add the month once and each date in, sorry! otherwise 'twill repeat.
// repeat one if month and if days and { print day } for EACH MONTH
//alert(monthWord[month]);
// once (each month with dates)
if (monthWord[month] == "December")
// repeat each number for event dates ONLY (and in that month)
if (1 != Calendar.getDate())
if (7 != Calendar.getDate())
if (8 != Calendar.getDate())
if (16 != Calendar.getDate())
if (21 != Calendar.getDate())
if (24 != Calendar.getDate())
if (25 != Calendar.getDate())
if (27 != Calendar.getDate())
if (28 != Calendar.getDate())
if (29 != Calendar.getDate())
if (30 != Calendar.getDate())
if (31 != Calendar.getDate())
{
// prints day
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "January")
if (1 != Calendar.getDate())
if (2 != Calendar.getDate())
if (3 != Calendar.getDate())
if (4 != Calendar.getDate())
if (5 != Calendar.getDate())
if (14 != Calendar.getDate())
if (22 != Calendar.getDate())
if (29 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "October")
if (30 != Calendar.getDate())
if (31 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "November")
if (1 != Calendar.getDate())
if (23 != Calendar.getDate())
{
document.writeln(TD + day + "</td>");
}

if (monthWord[month] == "April")
if (22 != Calendar.getDate())
if (29 != Calendar.getDate()){
document.writeln(TD + day + "</td>");}
}
// if day of week = 7 (Saturday), close the row
else if (weekDay == weekDays){
alert("here");
//document.writeln(index);
//document.writeln(TD + day + "</td>");
document.writeln("</tr>");
}
}
// this must go below all date code, above event messages
Calendar.setDate(Calendar.getDate()+1);
}
document.writeln("</TABLE>");
</script>
<!-- END CALENDAR!!!!! -->

BTW: Great looking site you've got there ;)

ColourDreamer
04-18-2005, 05:33 AM
It does work! And it's organized. And you did this cute "-" thing for blank days. Thanks. Also, I forgot to add those "nullfiers" for the new April dates, I did it so quickly, didn't I?

You don't know what you did??!!! LOL ... THANKS!!!

And thanks for the compliment on my site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum