PDA

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



ColourDreamer
04-17-2005, 07: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, 10: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, 06: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.