Page 1 of 1

javascript calander

Posted: Thu Apr 26, 2007 2:07 am
by kpraman
I am new to javascript. I need a calander from which i can select multiple dates and submit to php. (so that i can store the dates in database). I already have a calander in PHP. The problem is that i cannot select multiple dates involving two months as the values are lost when next month is selected

Posted: Thu Apr 26, 2007 4:30 am
by kpraman
This is the Js calander I have, if i select dates and post, its working fine, if i select dates involving 2 months, only the second months datas are posted.

Code: Select all

<?php
$month=$_POST['checkbox'];
print_r($month);

?>

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<style type="text/css">
a {
	color:#FFFF00;
}
.calendar {
	width:91%;
	border: 1px solid #000000;
}
.calendar td a {
	text-decoration:none;
	color:#006699;
}
.calendar td a:hover {
	text-decoration:underline;
	color:#FF0000;
}
.calendar td, .calendar th {
	width:13%;
	border: 1px solid #000000;
	padding: 3px 3px 3px 3px;
}
.calendar th {
	background-color:#000099;
	color:#FFFF00;
	font-weight:bold;
}
.calendar td {
	height:50px;
	font-weight:bold;
	vertical-align:top;
}
.blank {
	background-color:#999999;
}
.weekend {
	color:#FF0000;
}
.occassion {
	background-color:#FFFF99;
}
</style>

Code: Select all

<script language="javascript" type="text/javascript">
// set up variables
var monthsArray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var daysArray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var prevYears = 10;	// number of years before current date
var futureYears = 50;	// number of years after current date
var today = new Date();
var nowMonth = today.getMonth();
var nowYear = today.getFullYear();
var curMonth = nowMonth;
var curYear = nowYear;
var monthEvents;
today.setDate(1);	// set to first day of the month

var eventsArray = new Array();
eventsArray[0] = new newEvent(25,12,2005,"Christmas Day","Annual");
eventsArray[1] = new newEvent(30,7,2005,"My Birthday","Annual");
eventsArray[2] = new newEvent(1,1,2005,"First Day of Month","Monthly");
eventsArray[3] = new newEvent(2,12,2005,"Weekly occurence","Weekly");
eventsArray[4] = new newEvent(24,12,2005,"Christmas Eve","Annual");

// create event object
function newEvent(day, month, year, memo, occurrence) {
	this.day = day;
	this.month = month;
	this.year = year;
	this.memo = memo;
	this.occurrence = occurrence;
	this.createMonth = createMonth;
}

// creates calendar for the current month
function createMonth() {
	var startDay = today.getDay();	// first day of the month
	var monLength = monthLength();	// number of days in month
	var lastDay = startDay+monLength-1;	// last day of the month
	monthEvents = new Array();	// array to hold events for current month
	
	// search through events for current month
	for(i=0;i<eventsArray.length;i++) {
		if(eventsArray[i].month == (curMonth+1) && (eventsArray[i].year == curYear || eventsArray[i].occurrence == "Annual")) {
			monthEvents[monthEvents.length] = i;
		}
		else if(eventsArray[i].occurrence == "Monthly" || eventsArray[i].occurrence == "Weekly") {
			monthEvents[monthEvents.length] = i;
		}
	}
	
	var content = "<form method='post' action=''><table class=\"calendar\" cellspacing=\"0\">\n";
	// create headers
	content += "<tr>\n<th><a href=\"javascript:void(prev())\">Previous</a></th>\n";
	content += "<th colspan=\"5\">" + monthsArray[curMonth] + " " + curYear + "</th>\n";
	content += "<th><a href=\"javascript:void(next())\">Next</a></th>\n</tr><tr>\n";
	for(i=0;i<7;i++) {
		content += "<th>" + daysArray[i] + "</th>\n";
	}
	content += "</tr>\n<tr>\n";
	
	// create main content of calendar
	for(i=0;i<42;i++) {
		var occ = "";
		var occContent = "";
		var curDay = i+1-startDay;
		// check day against months events
		for(j=0;j<monthEvents.length;j++) {
				var occDate = new Date();
				occDate.setDate(eventsArray[monthEvents[j]].day);
				occDate.setMonth(eventsArray[monthEvents[j]].month);
				occDate.setFullYear(eventsArray[monthEvents[j]].year);
				
				if(curDay == eventsArray[monthEvents[j]].day && eventsArray[monthEvents[j]].occurrence != "Weekly") {	// deal with day, monthly and annual events
					occ = " class=\"occassion\"";
					fullContent = eventsArray[monthEvents[j]].memo;
					if(eventsArray[monthEvents[j]].memo.length > 14) {
						occContent = fullContent.substr(0,13) + "...";
						break;
					}
					else {
						occContent = fullContent;
						break;
					}
				}
				else if(occDate.getDate() == (i%7) && eventsArray[monthEvents[j]].occurrence == "Weekly") {	// deal with weekly events
					occ = " class=\"occassion\"";
						fullContent = eventsArray[monthEvents[j]].memo;
					if(eventsArray[monthEvents[j]].memo.length > 14) {
						occContent = fullContent.substr(0,13) + "...";
						break;
					}
					else {
						occContent = fullContent;
						break;
					}
				}
		}
		if(i>lastDay && i==35) {	// do not show last row if not needed
			break;
		}
		if(i<startDay || i>lastDay) {	// show blank cells before and after month
			content += "<td class=\"blank\">&nbsp;</td>\n";
		}
		else {
			if(!(i%7) || !((i+1)%7) ) {	// get days of the weekend
				if(!(i%7)&& i>0) {
					content += "</tr>\n<tr>\n";
				}
				content += "<td" + occ + "><span class=\"weekend\">"+curDay+"<input type='checkbox' name='checkbox[]' value="+curMonth+"_"+curDay+"_"+curYear+"></span><br /><a href=\"javascript:void(alert('"+fullContent+"'));s\">"+occContent+"</a></td>\n";
			}
			else {
				content += "<td" + occ + ">"+curDay+"<br /><a href=\"javascript:void(alert('"+fullContent+"'));\">"+occContent+"</a></td>\n";
			}
		}
	}
	content += "<input type='submit' name='submit' value='submit'></tr></table></form>\n";
	
	return content;
}

// get length of month
function monthLength() {
	monLength = 31;
	if(curMonth == 3 || curMonth == 5 || curMonth == 8 || curMonth == 10) monLength = 30;
	if(curMonth == 1) {
		if(curYear%4) {
			monLength = 28;
		}
		else {
			monLength = 29;
		} 
	}
	return monLength;
}

function droplists() {
	content = "<form name=\"calNav\" method=\"post\" action=\"\">\n";
	content += "<select name=\"month\">\n";
	for(i=0;i<12;i++) {
		content += "<option value=\""+i +"\"";
		if(i == curMonth) {
			content += " selected=\"selected\"";
		}
		content += ">" + monthsArray[i] + "</option>\n";
	}
	content += "</select> <select name=\"year\">\n";
	for(i=(nowYear-prevYears);i<=(nowYear+futureYears);i++) {
		content += "<option value=\""+i +"\"";
		if(i == curYear) {
			content += " selected=\"selected\"";
		}
		content += ">" + i + "</option>\n";
	}
	content += "</select>\n<input type=\"button\" value=\"Go\" onclick=\"newMonth()\" />\n";
	content += "</form>\n";
	return content;
}

function newMonth() {
	var mon = document.calNav.month.selectedIndex;
	curMonth = parseInt(document.calNav.month.options[mon].value);
	var yr = document.calNav.year.selectedIndex;
	curYear = parseInt(document.calNav.year.options[yr].value);
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}

// goto previous month
function prev() {
	curMonth -= 1;
	if(curMonth<0) {
		curMonth=11;
		if(curYear>(nowYear-prevYears)) {
			curYear -= 1;
		}
	}
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}

// goto next month
function next() {
	curMonth += 1;
	if(curMonth>11) {
		curMonth=0;
		if(curYear<(nowYear+futureYears)) {
			curYear += 1;
		}
	}
	today.setMonth(curMonth);
	today.setFullYear(curYear);
	document.getElementById("showCal").innerHTML = droplists() + createMonth();
}
</script>
</head>

<body>
<div id="showCal">
<script language="javascript" type="text/javascript">
document.write(droplists());
document.write(createMonth());
</script>
<noscript>
<p>To view this dynamic content you need to upgrade your browser as it does not support these features</p>
</noscript>
</div>
</body>
</html>

Posted: Thu Apr 26, 2007 1:54 pm
by Kieran Huggins
Burrito made one

there's a pre-built jQuery solution as well