calendar view

flemingmike · January 1, 2011

hello,

is there a simple way to have a full size calendar that shows current month and on each day, it will look into my mysql table and if i have an entry on that day, show the sales field.

i have spent days googling, and trying my own and i just cant get anything.

if i had a calendar script, i could do the rest, but i cant seem to find it, or make it.

BlueSkyIS · January 1, 2011

http://www.google.com/search?client=safari&rls=en&q=php+calendar+script&ie=UTF-8&oe=UTF-8

flemingmike · January 1, 2011

ive tried problbly 50 of those, they are way more complex than i need. and most of them have multiple tables in their database that hold info for each record. i already have my own table. all i want my calendar to show was the sales amount for that day.

PFMaBiSmAd · January 1, 2011

1) Find a simple calendar script that displays a calendar the way you want.

2) Query your data table for the range of dates being displayed and read the data into an array with the index being the date and the value being the data.

3) Pass your array of data into the function that generates the calendar and when the current date being displayed exists in the array, get and output the data. Remove the just processed data from the array (makes accessing the remaining data quicker.) This may require that you produce the current date being displayed in the calendar code that matches the format you have in the array keys.

4) Done.

PFMaBiSmAd · January 2, 2011

Here is an example -

<?php
function showMonth($month, $year, $data)
{
$date = mktime(12, 0, 0, $month, 1, $year);
$daysInMonth = date("t", $date);
$offset = date("w", $date);
$rows = 1;
echo "<h1>Displaying calendar for " . date("F Y", $date) . "</h1>\n";
echo "<table border=\"1\">\n";
echo "\t<tr><th>Su</th><th>M</th><th>Tu</th><th>W</th><th>Th</th><th>F</th><th>Sa</th></tr>";
echo "\n\t<tr>";
for($i = 1; $i <= $offset; $i++)
{
	echo "<td></td>";
}
for($day = 1; $day <= $daysInMonth; $day++)
{
	if( ($day + $offset - 1) % 7 == 0 && $day != 1)
	{
		echo "</tr>\n\t<tr>";
		$rows++;
	}
	// The original line of code: echo "<td>" . $day ."</td>"; was changed to the following 10 lines
	$cur_date = sprintf('%04d-%02d-%02d',$year,$month,$day); // format date as YYYY-MM-DD
	if(!isset($data[$cur_date])){
		echo "<td>" . $day ."</td>";
	} else {
		echo "<td class=\"has_data\"
		onMouseover=\"ddrivetip('{$data[$cur_date]}','yellow', 100)\"
		onMouseout=\"hideddrivetip()\"
		>" . $day ."</td>";
		unset($data[$cur_date]); // remove the data from the array
	}
}
while( ($day + $offset) <= $rows * 7)
{
	echo "<td></td>";
	$day++;
}
echo "</tr>\n";
echo "</table>\n";
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Calendar</title>
<style type="text/css">
td.has_data {background-color:orange;} 

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
</head>
<body>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>

<?php
$data = array(); // get or generate some data to add to the calendar
$data['2011-01-02'] = 'something';
$data['2011-01-20'] = 'else';
showMonth(1, 2011, $data); // Jan, 2011
?>
</body>
</html>

The showMonth() function was something I found, modified to accept the $data array when it was called and ~ 10 lines were added (see the commented section in the function) to handle the display of the data in the correct date cell.

Some css was used to set the background color of cells with data.

A dynamic drive tool tip script was used to display the data on mouse over.

The php code near the end simply gets some data into an array and calls the showMonth() function.

Sign In

calendar view

Recommended Posts

flemingmike

Link to comment

Share on other sites

BlueSkyIS

Link to comment

Share on other sites

flemingmike

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

PFMaBiSmAd

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information