calendar script

**davidjmorin** · 12-10-2007, 02:50 AM

Hello i was wondering if anyone knows how i can make it so that the following script displays the events of the current day. right now you have to click on the day in order to display the events. also if anyone knows how i can convert this so that it just shows the next 2 weeks that would be great. any help is much appreciated.

heres the code....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MySQL Calendar System - Easily using PHP &amp; Script.aculo.us</title>

<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>

<style>
	body {
		font-family: Tahoma;
		font-size: 12px;
	}
	
	.calendarBox {
		position: relative;
		top: 30px;
		margin: 0 auto;
		padding: 5px;
		width: 254px;
		border: 1px solid #000;
	}

	.calendarFloat {
		float: left;
		width: 31px;
		height: 25px;
		margin: 1px 0px 0px 1px;
		padding: 1px;
		border: 1px solid #000;
	}
</style>

<script type="text/javascript">
	function highlightCalendarCell(element) {
		$(element).style.border = '1px solid #999999';
	}

	function resetCalendarCell(element) {
		$(element).style.border = '1px solid #000000';
	}
	
	function startCalendar(month, year) {
		new Ajax.Updater('calendarInternal', 'rpc.php', {method: 'post', postBody: 'action=startCalendar&month='+month+'&year='+year+''});
	}
	
	function showEventForm(day) {
		$('evtDay').value = day;
		$('evtMonth').value = $F('ccMonth');
		$('evtYear').value = $F('ccYear');
		
		displayEvents(day, $F('ccMonth'), $F('ccYear'));
		
		if(Element.visible('addEventForm')) {
			// do nothing.
		} else {
			Element.show('addEventForm');
		}
	}
	
	function displayEvents(day, month, year) {
		new Ajax.Updater('eventList', 'rpc.php', {method: 'post', postBody: 'action=listEvents&&d='+day+'&m='+month+'&y='+year+''});
		if(Element.visible('eventList')) {
			// do nothing, its already visble.
		} else {
			setTimeout("Element.show('eventList')", 300);
		}
	}
	
	function addEvent(day, month, year, body) {
		if(day && month && year && body) {
			// alert('Add Event\nDay: '+day+'\nMonth: '+month+'\nYear: '+year+'\nBody: '+body);
			new Ajax.Request('rpc.php', {method: 'post', postBody: 'action=addEvent&d='+day+'&m='+month+'&y='+year+'&body='+body+'', onSuccess: highlightEvent(day)});
			$('evtBody').value = '';
		} else {
			alert('There was an unexpected script error.\nPlease ensure that you have not altered parts of it.');
		}
		
		// highlightEvent(day);
	} // addEvent.
	
	function highlightEvent(day) {
		Element.hide('addEventForm');
		$('calendarDay_'+day+'').style.background = '#313131';
	}
	
	function showLoginBox() {
		Element.show('loginBox');
	}
	
	function showCP() {
		Element.show('cpBox');
	}
	
	function deleteEvent(eid) {
		confirmation = confirm('Are you sure you wish to delete this event?\n\nOnce the event is deleted, it is gone forever!');
		if(confirmation == true) {
			new Ajax.Request('rpc.php', {method: 'post', postBody: 'action=deleteEvent&eid='+eid+'', onSuccess: Element.hide('event_'+eid+'')});
		} else {
			// Do not delete it!.
		}
	}

</script>


</head>
<body>

	<div id="calendar" class="calendarBox">
		<div id="calendarInternal">
			&nbsp;
		</div>
		<br style="clear: both;">
		<span id="LoginMessageBox" style="color: red; margin-top: 10px;"></span>

		<div id="eventList" style="display: none;"></div>
		<div style="display: none; margin-top: 10px;" id="addEventForm">
			<b>Add Event</b>
			<br>
			Date: <input type="text" size="2" id="evtDay" disabled> <input type="text" size="2" id="evtMonth" disabled> <input type="text" size="4" id="evtYear" disabled>
			<br>
			<textarea id="evtBody" cols="32" rows="5"></textarea>

			<br>
			<input type="button" value="Add Event" onClick="addEvent($F('evtDay'), $F('evtMonth'), $F('evtYear'), $F('evtBody'));">
			<a href="#" onClick="Element.hide('addEventForm');">Close</a>
		</div>
		
		<div style="display: none; margin-top: 10px;" id="loginBox">
			<b>Login</b>
			<br>
			<form action="index.php" method="post">

				Username: <input type="text" name="username" size="20">
				<br>
				Password: <input type="password" name="password" size="20">
				<br>
				<input type="hidden" name="action" value="login">
				<input type="submit" value="Login">
				<a href="#" onClick="Element.hide('loginBox');">Close</a>

			</form>
		</div>
		
		<div style="display: none; margin-top: 10px;" id="cpBox">
			<b>Control Panel</b> <a href="#" onClick="Element.hide('cpBox');">Close</a>
			<br><br>
			<b>Change the colours</b>
			<br>

			<form action="index.php" method="post">
				Day Colour: <input type="text" name="dayColor" size="6" maxlength="6" value="e6e1d3">
				<br>
				Weekend Colour: <input type="text" name="weekendColor" size="6" maxlength="6" value="a0a395">
				<br>
				Today Colour: <input type="text" name="todayColor" size="6" maxlength="6" value="ffeb45">
				<br>

				Event Colour: <input type="text" name="eventColor" size="6" maxlength="6" value="313131">
				<br>
				Iterator 1 Colour: <input type="text" name="iteratorColor1" size="6" maxlength="6" value="ffffff">
				<br>
				Iterator 2 Colour: <input type="text" name="iteratorColor2" size="6" maxlength="6" value="e6ffab">
				<br>
				<input type="hidden" name="action" value="updateColours">

				<input type="submit" value="Update Colours">
			</form>
			
			<br>
			<form action="index.php" method="post">
				<input type="hidden" name="action" value="updatePassword">
				<b>Change your password</b>
				<br>
				New Password: <input type="password" name="password1" size="20">

				<br>
				Confirm it: <input type="password" name="password2" size="20">
				<br>
				<input type="submit" value="Update Password">
			</form>
				
			<br><br>
			<b>Logout</b>
			<form action="index.php" method="post">

				<input type="hidden" name="action" value="logout">
				<input type="submit" value="logout">
			</form>
		</div>
		
	</div> <!-- FINAL DIV DO NOT REMOVE -->
	
	<script type="text/javascript">
		startCalendar(0,0);
	</script>

</body>
</html>

the link is www.portlandoldport.com/calendartest

**davidjmorin** · 12-10-2007, 02:51 AM

what i would like is a script like the one on metromix.com its on the right hand side of the page down a bit. if anyone knows where i can get that let me know. Thanks guys

Thread: calendar script

Thread Tools

Search Thread

calendar script

Bookmarks

Bookmarks

Posting Permissions