Solved

Javascript Calendar not displaying

Posted on 2014-04-29
1
199 Views
Last Modified: 2014-04-30
I am having issues getting a calendar to display.  The window.open is working but nothing is displaying.  I don't see what is causing the issue.

<a href="" onclick="displayCalendar(); return false">Select Date</a>

Open in new window


<script type="text/javascript">
/* <![CDATA[ */

function displayCalendar(whichMonth) 
{
	calendarWin = window.open("", "CalendarWindow", "status=no,resizable=yes,width=400,height=220,left=200,top=200");
	calendarWin.focus();
	calendarWin.document.write("<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN' ");
	calendarWin.document.write("'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd'>");
	calendarWin.document.write("<html xmlns='http:\/\/www.w3.org\/1999\/xhtml'>");
	calendarWin.document.write("<head><title>Calendar<\/title>");
	calendarWin.document.write("<meta http-equiv='content-type' content='text\/html;charset=iso-8859-1' \/>");
	calendarWin.document.write("<link rel='stylesheet' href='js_styles.css' type='text\/css' \/><\/head><body>");
	calendarWin.document.write("<table cellspacing='0' border='1' width='100%'>");
	calendarWin.document.write("<colgroup span='7' width='50' \/>");
	calendarWin.document.write("<tr><td colspan='7' align='center'><strong>" + monthArray[month] + " " + dateObject.getFullYear() + "<\/strong><\/td></tr>");
	calendarWin.document.write("<tr align='center'><td>Sun<\/td><td>Mon<\/td><td>Tue<\/td><td>Wed<\/td><td>Thu<\/td><td>Fri<\/td><td>Sat<\/td><\/tr>");
	calendarWin.document.write("<tr align='center'>");
	dateObject.setDate(1);

	var dayOfWeek = dateObject.getDay();
	for (var i=0; i<dayOfWeek; ++i) {
		calendarWin.document.write("<td>&nbsp;<\/td>");
	}

	var daysWithDates = 7 - dayOfWeek;
	var dateCounter = 1;
	for (var i=0; i<daysWithDates; ++i) {
		var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear();
		calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0].reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "<\/a><\/td>");
		++dateCounter;
	}

	var numDays = 0;
	if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11)
		numDays = 31;
	if (month == 1)
		numDays = 28;
	else if (month == 3 || month == 5 || month == 8 || month == 10)
		numDays = 30;

	for (var rowCounter = 0; rowCounter < 5; ++rowCounter) 
	{
		var weekDayCounter = 0;
		calendarWin.document.write("<tr align='center'>");
		while (weekDayCounter < 7) {
			var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear();
			if (dateCounter <= numDays)
				calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0].reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "<\/a><\/td>");
			else
				calendarWin.document.write("<td>&nbsp;<\/td>");
			++weekDayCounter;
			++dateCounter;
		}
		calendarWin.document.write("<\/tr>");
	}
			  
	calendarWin.document.write("<\/table><\/body><\/html>");
	calendarWin.document.close();
}

/* ]]> */
</script> 

Open in new window

0
Comment
Question by:CipherIS
1 Comment
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40031249
The first three lines I added to the function were undefined in your original code which cause the javascript to fail.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Javascript Calendar Popup</title>
<script type="text/javascript">
/* <![CDATA[ */

function displayCalendar(whichMonth) 
{
	var dateObject = new Date();
	var month = dateObject.getMonth(); 
	var monthArray = new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sept","Oct","Nov","Dec");

	var calendarWin = window.open("", "CalendarWindow", "status=no,resizable=yes,width=400,height=220,left=200,top=200");
	calendarWin.focus();
	calendarWin.document.write("<!DOCTYPE html PUBLIC '-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN' ");
	calendarWin.document.write("'http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd'>");
	calendarWin.document.write("<html xmlns='http:\/\/www.w3.org\/1999\/xhtml'>");
	calendarWin.document.write("<head><title>Calendar<\/title>");
	calendarWin.document.write("<meta http-equiv='content-type' content='text\/html;charset=iso-8859-1' \/>");
	calendarWin.document.write("<link rel='stylesheet' href='js_styles.css' type='text\/css' \/><\/head><body>");
	calendarWin.document.write("<table cellspacing='0' border='1' width='100%'>");
	calendarWin.document.write("<colgroup span='7' width='50' \/>");
	calendarWin.document.write("<tr><td colspan='7' align='center'><strong>" + monthArray[month] + " " + dateObject.getFullYear() + "<\/strong><\/td></tr>");
	calendarWin.document.write("<tr align='center'><td>Sun<\/td><td>Mon<\/td><td>Tue<\/td><td>Wed<\/td><td>Thu<\/td><td>Fri<\/td><td>Sat<\/td><\/tr>");
	calendarWin.document.write("<tr align='center'>");
	dateObject.setDate(1);

	var dayOfWeek = dateObject.getDay();
	for (var i=0; i<dayOfWeek; ++i) {
		calendarWin.document.write("<td>&nbsp;<\/td>");
	}

	var daysWithDates = 7 - dayOfWeek;
	var dateCounter = 1;
	for (var i=0; i<daysWithDates; ++i) {
		var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear();
		calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0].reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "<\/a><\/td>");
		++dateCounter;
	}
	var numDays = 0;
	if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11)
		numDays = 31;
	if (month == 1)
		numDays = 28;
	else if (month == 3 || month == 5 || month == 8 || month == 10)
		numDays = 30;

	for (var rowCounter = 0; rowCounter < 5; ++rowCounter) 
	{
		var weekDayCounter = 0;
		calendarWin.document.write("<tr align='center'>");
		while (weekDayCounter < 7) {
			var curDate = monthArray[month] + " " + dateCounter + ", " + dateObject.getFullYear();
			if (dateCounter <= numDays)
				calendarWin.document.write("<td><a href='' onclick='self.opener.document.forms[0].reservationDate.value=\"" + curDate + "\";self.close()'>" + dateCounter + "<\/a><\/td>");
			else
				calendarWin.document.write("<td>&nbsp;<\/td>");
			++weekDayCounter;
			++dateCounter;
		}
		calendarWin.document.write("<\/tr>");
	}
			  
	calendarWin.document.write("<\/table><\/body><\/html>");
	calendarWin.document.close();
}

/* ]]> */
</script> 

</head>
<body>
<h1>Javascript Calendar Popup</h1>
<a href="" onclick="displayCalendar(1); return false">Select Date</a>
</body>
</html>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now