Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page My own Javascript Calendar used to work, now doesn't

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-17-2005, 06:18 PM   PM User | #1
ColourDreamer
New to the CF scene

 
Join Date: Apr 2005
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
ColourDreamer is an unknown quantity at this point
Exclamation My own Javascript Calendar used to work, now doesn't
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.

Code:
<!-- 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.
ColourDreamer is offline   Reply With Quote
Old 04-17-2005, 09:01 PM   PM User | #2
Badman3k
Regular Coder

 
Join Date: Jun 2002
Location: Edinburgh, UK
Posts: 402
Thanks: 2
Thanked 1 Time in 1 Post
Badman3k is an unknown quantity at this point
wow
Okay I've got it to work, don't ask how, 'cause I don't know lol

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

Code:
<!-- 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
__________________
Rich

"An expert is a person who has made all the mistakes that can be made in a very narrow field."
Badman3k is offline   Reply With Quote
Old 04-18-2005, 05:33 AM   PM User | #3
ColourDreamer
New to the CF scene

 
Join Date: Apr 2005
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
ColourDreamer is an unknown quantity at this point
Thumbs up Thanks!!
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.
ColourDreamer is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 08:04 PM.
Advertisement
Log in to turn off these ads.