[SOLVED] Need some help with calendar

Spark_Plug · May 11, 2009

I had posted this in the PHP forum but figured I would post here too. I am having problems understanding how to implement the AJAX into my php. I am going off of this, http://www.evolt.org/quick_calendar_using_ajax_and_php My PHP class works and displays the calendar for the current month fine. I want to be able to move to the next month without having to refresh the page.

Here is my PHP

<?php
class Calendar
{
//Initialize Variables
var $counter, $year, $month, $day, $daysInMonth, $firstDay, $tempDays, $weeksInMonth, $week;

function __construct(){
// Getting Todays Date

$this->year = date('Y');
$this->month = date('n');
$this->day = date('j');
}

public function fillArray()
{
	$this->daysInMonth = date('t', mktime(0,0,0, $this->month, 1, $this->year));

	// Getting first day of the month
	$this->firstDay = date("w", mktime(0,0,0, $this->month, 1,$this->year));

	// Calculating total spaces needed in array
	$tempDays = $this->firstDay + $this->daysInMonth;

	// Calculate total rows needed
	$this->weeksInMonth = ceil($tempDays/7);

	for ($i=0; $i <$this->weeksInMonth; $i++)
	{
		for ($j=0; $j<7; $j++)
		{
			$this->counter++;
			$this->week[$i][$j] = $this->counter; 
			$this->week[$i][$j] -= $this->firstDay;

			if ($this->week[$i][$j] < 1 || $this->week[$i][$j] > $this->daysInMonth)
				$this->week[$i][$j] = "&nbsp";
		}
	}
}	

public function displayCalendar()
{
	$this->fillArray();
	echo '<table>
			<tr>
				<th colspan="7">';
	echo date('M', mktime(0,0,0,$this->month,1,$this->year)) . " " . $this->year;
	echo '</th>
			</tr>
			<tr>
				<th>Sun</th>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thr</th>
				<th>Fri</th>
				<th>Sat</th>
			</tr>';
	for ($i=0; $i <$this->weeksInMonth; $i++)
	{
		echo '<tr>';
		for ($j=0; $j < 7; $j++)
		{
			echo '<td>';
			echo $this->week[$i][$j] . '</td>';
		}
		echo '</tr>';
	}
	echo '</table>';
}
}

?>

and where I implement the calendar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>UWW DECA</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header">
	<img src="images/logo.jpg" width="800" height="250"   /></div>
<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
</div>
<div id="content">
	<div id="left">
		<div class="post">
			<h2>Recent Updates</h2>
			<p>This will be a blog like feature.  Any news stories will be updates here.
		</div>
	</div>
	<div id="right">
		<h2>Calendar</h2>
			<?php
				require_once('testCalendar.php');
				$obj = new Calendar();
				$obj->displayCalendar();
			?>
	</div>
</div>
<div id="footer">
	<p class="copyright">Copyright © 2009 University of Wisconsin - Whitewater DECA
</div>
</div>
</body>
</html>

On the website it gives these two statements to use to make it work but I have no idea on where to put them in my main page

http.open('get', 'quick_calendar.php?m='+m+&y='+y+'&ran='+ran_no);

and

document.getElementById("quickCalender").innerHTML = http.responseText;

Thanks for any help

gregor171 · May 16, 2009

There are really a lot of calendar samples on the web. With JavaScript calendar you don't need Ajax. Never the less, it's a good practice ;-)

So if you want to practice ajax.

put your calendar in a div, so it's easy to populate it's new content.

<h2>Calendar</h2>
<div id="my_calendar">
            <?php
               require_once('testCalendar.php');
               $obj = new Calendar();
               $obj->displayCalendar();
            ?>
</div>

you need some next month and previous month buttons or links somewhere in your calendar html.

then you implement onclick event.

<button type="button" onclick="javascript:show_month(12,2008);">previous month</button>

Then you implement Ajax (should find a better sample for this, since your's is too simple and will not work in all browsers).

to populate a new calendar, just put:

document.getElementById("my_calendar").innerHTML=my_ajax_response_code;

Spark_Plug · May 21, 2009

I got the ajax working now. HOwever it is only working in IE and I cannot find out why it is not working in Firefox or Safari. Here is all the code I used:

displayCalendar function in testCalendar.php

public function displayCalendar($month, $year)
{
	$this->setDate($month, $year);
	$this->fillArray();

	$prevMonth = $month - 1;
	$nextMonth = $month + 1;
	$tempYear = 0;

	if ($nextMonth == 13)
	{
		$nextMonth = 1;
		$tempYear = $year + 1;
	}

	if ($prevMonth == 0)
	{
		$prevMonth = 12;
		$tempYear = $year - 1;
	}


	echo '<table>
			<tr>
				<th><a value="'. $prevMonth . '" href="#" onClick="showMonth(this.value, ';
	if ($tempYear < $year && $tempYear != 0)
	{
		echo $tempYear;
	}
	else
	{
		echo $year;
	}				
	echo ')"><-</a></th>
				<th colspan="5">';
	echo date('M', mktime(0,0,0,$month,1,$year)) . " " . $year;
	echo '</th>
			<th><a value="'. $nextMonth . '" href="#" onClick="showMonth(this.value, ';
	if ($tempYear > $year)
	{
		echo $tempYear;
	}
	else
	{
		echo $year;
	}
	echo ')">-></a>
			</tr>
			<tr>
				<th>Sun</th>
				<th>Mon</th>
				<th>Tue</th>
				<th>Wed</th>
				<th>Thr</th>
				<th>Fri</th>
				<th>Sat</th>
			</tr>';
	for ($i=0; $i < $this->weeksInMonth; $i++)
	{
		echo '<tr>';
		for ($j=0; $j < 7; $j++)
		{
			$day = $this->week[$i][$j];
			if ($this->findEvents($day) > 0)
			{
				echo '<td class="event"><a value="'. $day . '" href="#" onMouseOver="showUser(this.value)"><b>' . $day . '</b></a></td>';
			}
			else
				echo '<td>' . $day . '</td>';
		}
		echo '</tr>';
	}
	echo '</table>';
}

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>UWW DECA</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="selectuser.js"></script>
<script type="text/javascript" src="selectmonth.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
	<img src="images/logo.jpg" width="800" height="250"  alt="UWW DECA Logo" />
</div>
<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
</div>
<div id="content">
	<div id="left">
		<div class="post">
			<h2>Recent Updates</h2>
			<p>This will be a blog like feature.  Any news stories will be updates here.</p>
		</div>
	</div>
	<div id="right">
		<h2>Calendar</h2>
		<div id="calendar">
			<?php
				require_once('testCalendar.php');
				$obj = new Calendar();
				$obj->displayCalendar($obj->getMonth(), $obj->getYear());
			?>
		</div>
		<br />
		<div id="events">
		</div>		
	</div>
	<div id="firefoxfix"></div>
</div>
<div id="footer">
	<p class="copyright">Copyright © 2009 University of Wisconsin - Whitewater DECA
</div>
</div>
</body>
</html>

selectmonth.js

var xmlhttp;

function showMonth(str, str1)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="testCal.php";
url=url+"?m="+str;
url=url+"&y="+str1;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("calendar").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

selectuser.js is pretty much the same thing, so I won't include that one.

testCal.php:

<?php
$month = $_GET["m"];
$year = $_GET["y"];

require_once('testCalendar.php');
$testCal = new Calendar();
$testCal->displayCalendar($month, $year);
?>

If you need any other files or anything like that please let me know!

Thanks!

Spark_Plug · May 22, 2009

I just realized after testing again, that these might be two seperate problems. The first one, the onMouseOver which is supposed to update a div with content loaded from my DB, only shows the heading, not the actual data. Then the next month and prev month buttons don't work. I get an error like mktime is expecting a long but receieved a string instead. When I cast $month as a double, that error goes away but it jumps to Dec 2009 and then on that calendar, the next mont and prev month buttons don't work.

Sign In

[SOLVED] Need some help with calendar

Recommended Posts

Spark_Plug

Link to comment

Share on other sites

gregor171

Link to comment

Share on other sites

Spark_Plug

Link to comment

Share on other sites

Spark_Plug

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information