Jump to content

JavaScript Calendar


Guest mmm

Recommended Posts

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.

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...