(Before I get nailed for posting in this forum. I TRIED to post in the client-side forum and it just kept going to the login screen over and over. This post also sorta deals with PHP, not just Javascript. :-) Thanks!)

I currently have a php-based calendar on my site.

This calendar works fine as the site is now, but I'm redoing the site with more php code which would conflict with the calendar needing to refresh the page in order to scroll through months/years.

Right now, the calendar shows certain days which contain events derived from entries in a mySQL database. The events display via hiding/showing div tags below the calendar.

So, I need some sort of client-side calendar that will also allow me to display events on certain days on the calendar as the php one does.

Have any of you seen anything like this?
I'm a bit of a newb at client-side scripting, so I'd much rather find a calendar that already has this or similar capability than to try to reinvent the wheel!

I've found TONS of jscript and DHTML calendars, but none have the ability to use a database for events.

Thanks!
Matt

    take a look at www.micromanagersgroup.com

    it's basically a php/js calendar and works with my db. I wrote it so you don't need to worry about anyone else saying take it off.

    here's the JS

    <script>
function handleResponse()
{//when you get a response back do whatever you want with them
  if(test_request.readyState == 4)
  {
    var response = test_request.responseText;
    if(response != ""){
	   	document.getElementById('calendar_wrap').innerHTML = response;
    }
  }
}
function startProcess()
{

sendRequest("calendar.php");
}
function getcal(mOn,yEr)
{
	sendRequest("calendar.php?m=" + mOn + "&y=" + yEr);
}
</script>

    And here's calendar.php

    
<?php

function gosql($query){

$db_host = "localhost";
$db_user = "";
$db_pass = "";
$db_name = "";

$link = mysql_connect ($db_host, $db_user, $db_pass) or die ("Couldn't connect to server.");
mysql_select_db ($db_name) or die("Couldn't select database.");

$result = mysql_query($query) or die(mysql_error());

if((substr($query, 0, 6) == "SELECT")&&($result)){

	$ra = array();
	$i = 0;

	while ($line = mysql_fetch_array($result, MYSQL_ASSOC)){
		$ra[$i] = $line;
		$i++;
	}

	mysql_free_result($result);

}

if(substr($query, 0, 6) == "INSERT") $ra = mysql_insert_id($link);

mysql_close($link);

return $ra;
}

$thismonth = (!$_GET["m"]) ? date("n", time()) : $_GET["m"];
$thisyear = (!$_GET["y"]) ? date("Y", time()) : $_GET["y"];

$today = date("n-j-Y", time());
$month = date("F", mktime(0, 0, 0, $thismonth, 1, $thisyear));

function gettab($day, $date, $lst) {

$days = array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
global $today, $thisyear, $thismonth;
$tday = ($today == $thismonth."-".$date."-".$thisyear) ? "id=\"today\"" : "";

$startday = mktime(0, 0, 0, $thismonth, $date, $thisyear);
$endday = mktime(23, 59, 59, $thismonth, $date, $thisyear);

$sql = "SELECT * FROM `events` WHERE `date`>'$startday' AND `date`<'$endday' LIMIT 1";
$count = gosql($sql);
//#BBF3FF
	if(count($count) > 0) {
		$tday = (!$tday) ? "id=\"events\"" : $tday;
	}

$chkday = "<a href=\"/events_".$thismonth."_".$date."_".$thisyear.".html\">$date</a>";

if($date == 1) {
	$i = 0;
	foreach($days as $d) {
		if($day == $d) {
			$newrow .= "<tr>";
			if($i > 0) $newrow .= "<td class=\"pad\" colspan=\"$i\">&nbsp;</td>";
			$newrow .= "<td $tday>$chkday</td>";
			if($day == "Sat") $newrow .= "</tr>";
		} else {
			$i++;
		}	
	}

} else if($date < $lst && $date > 1) {
	foreach($days as $d) {
		if($day == $d) {
			if($day == "Sun") $newrow .= "<tr>";
			$newrow .= "<td $tday>$chkday</td>";
			if($day == "Sat") $newrow .= "</tr>";
		}	
	}

} else if($date == $lst) {
	$i = 0;
	foreach($days as $d) {
		if($day == $d) {
			$j = 6 - $i;
			if($day == "Sun") $newrow .= "<tr>";
			$newrow .= "<td $tday>$chkday</td>";
			if($i < 6) $newrow .= "<td class=\"pad\" colspan=\"$j\">&nbsp;</td>";
			$newrow .= "</tr>";
		} else {
			$i++;
		}
	}
}
return $newrow;
}
$t = $thismonth+1;

$lst = date("j", mktime(0, 0, 0, $t, 0, $thisyear));

for($i=1;$i<$lst+1;$i++) {
	$day = date("D", mktime(0, 0, 0, $thismonth, $i, $thisyear));
	$filler .= gettab($day, $i, $lst);
}

$pm = ($thismonth == 1) ? 12 : $thismonth-1;
$nm = ($thismonth == 12) ? 1 : $thismonth+1;

$py = ($nm == 2) ? $thisyear-1 : $thisyear;
$ny = ($nm == 1) ? $thisyear+1 : $thisyear;

$pmf = date("M", mktime(0, 0, 0, $pm, 1, $thisyear));
$nmf = date("M", mktime(0, 0, 0, $nm, 1, $thisyear));

echo <<<EOF
	<table id="wp-calendar" summary="Calendar">
		<caption><strong>$month $thisyear</strong></caption>
		<thead>
			<tr>
				<th abbr="Sunday" scope="col" title="Sunday">S</th>
				<th abbr="Monday" scope="col" title="Monday">M</th>
				<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
				<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
				<th abbr="Thursday" scope="col" title="Thursday">T</th>
				<th abbr="Friday" scope="col" title="Friday">F</th>
				<th abbr="Saturday" scope="col" title="Saturday">S</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td abbr="July" colspan="3" id="prev"><a href="javascript://" onclick="getcal('$pm','$py');">&laquo; $pmf</a></td>
				<td class="pad">&nbsp;</td>
				<td abbr="September" colspan="3" id="next" class="pad"><a href="javascript://" onclick="getcal('$nm','$ny');">$nmf &raquo;</a></td>
			</tr>
		</tfoot>
		<tbody>
			$filler
		</tbody>
	</table>
EOF;
?>

    Modify it however you want and change the code to handle the events how you like.

      Awesome...thanks!

      I'll give it a try and see if I can get it to do what I'm looking for.

        Unfortunately, that one still appears to be mostly php driven and puts the
        currently selected date info in the url.

        sendRequest("calendar.php?m=" + mOn + "&y=" + yEr);

        That's the part I'm trying to avoid. Of course, I could be wrong about what I'm seeing. I haven't fully analyzed the code to realize how it works exactly.

        The main points are that the page can't be reloaded, the url cannot be changed and I can't use an iframe.

        Will this code do that? Oh, and can the code be edited to show the events as pop-up divs instead of going to another page?

        Thanks!

          Write a Reply...