Jump to content
Sign in to follow this  
Guest mmm

JavaScript Calendar

Recommended Posts

Guest mmm

I am creating a calendar page for my website. The JavaScript prompts for a month and year and figures out the first day of the month. I ready to put it in the table on the page and I'm clueless how to do it.

Share this post


Link to post
Share on other sites

hi, i have just finished coding a calendar in JS. Althoug the output is not so neat [ i was just messing around with the idea ], it will sure give you a lot of hints and a good overview.

<html>	<head>		<title>Calendar</title>		<script>			var MonthName=new Array('January','February','March','April','May','June','July','August','September','October','November','December','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');			var DayName=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');			function getMonthName(i)			{				return MonthName[i];			}			function generateCal()			{				var mon =document.getElementById('d1').value;				var year=document.getElementById('y1').value;				var firstDate=new Date();				firstDate.setDate(1);				firstDate.setMonth(mon);				firstDate.setYear(year); 								var mybody=document.getElementsByTagName("fieldset").item(1);				mytable = document.createElement("TABLE");			        mytablebody = document.createElement("TBODY");			        for(j=0;j<6;j++) 				{				            mycurrent_row=document.createElement("TR");				            for(i=0;i<=6;i++) 					    {				                						mycurrent_cell=document.createElement("TD");						if(j==0)						       currenttext=document.createTextNode(DayName[i]);						else if(firstDate.getDay()==i)					        {						       currenttext=document.createTextNode(firstDate.getDate());						       firstDate.setDate(firstDate.getDate() + 1);						}						else   currenttext=document.createTextNode(" ");				                mycurrent_cell.appendChild(currenttext);				                mycurrent_row.appendChild(mycurrent_cell);				            }				            mytablebody.appendChild(mycurrent_row);			        }			        mytable.appendChild(mytablebody);			        mybody.appendChild(mytable);			        mytable.setAttribute("border","2");			        mytable.setAttribute("align","center");			        mytable.setAttribute("header","May");			}		</script>	</head>	<body>		<form>			<fieldset>				<legend>Select Month And Year</legend>				<center>					<select id="d1" name="d1" onchange="generateCal()">						<script>							for(i=0;i<=11;i++)								document.write("<option value=" + i + ">"+ getMonthName(i) + "");						</script>					</select>						<select id="y1" name="y1" onchange="generateCal()">						<script>							for(i=1980;i<=2008;i++)								document.write("<option value=" + i +">"+ i + "");						</script>					</select>					</center>							</fieldset>			<fieldset>			<legend>Calendar In Java Script By Prabhjot S.L. The KeenEyeLearner</legend>			</fieldset>		</form>	</body>	</html>

I hope this helps you out.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...