Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Edinburgh, UK
    Posts
    402
    Thanks
    2
    Thanked 1 Time in 1 Post

    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."

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •