Calendar System – Easily using PHP & Script.aculo.us

Hi,

Quite a few people seemed to like my previous tutorial Image Manipulation using PHP, and looking around many of the tutorial sites there are hardly any Calendar systems. Perfect, here is a simple, in calendar terms one…
You’ll see what I mean.

At the bottom of this tutorial, there is a link to the ZIP and the test site.

There are 3 main parts, the Javascript, the HTML and the PHP script.
For this tutorial, i am making it so you can change the date with the form and it will update the calendar without having to reload the entire page, AJAX style.

First, we need the Script.aculo.us library, if you download my zip test file it is already included, but if not go to: http://script.aculo.us

This is the basic HTML page with the style sheet.
The stylesheet is important because it contains the .calendarFloat part.
The important part is the < div id=”calendarInternal” > this is where the calendar will be loaded into, it’s in its own < div > because we need to clear the float to enclose the calendar and make the box enclose the entire calendar.

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<script src=”js/lib/prototype.js” type=”text/javascript”></script>
<script src=”js/src/scriptaculous.js” type=”text/javascript”></script>
<style>
.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>
<p id=”calendar” class=”calendarBox”> </p>

<p id=”calendarInternal”>

<br style=”clear: both” />

Next is the Javascript that has to be added to the Head of the document.
This does the highlighting and loading of the calendar using the script.aculo.us

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

function resetCalendarCell(element, color) {
$(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+});
}
</script>

The 2nd to last part is the RPC page, its not truly an RPC (remote procedure call) page, i just call it that because it is distinct.
I use a switch statement because my function is normally enclosed in a huge page, so here goes.

 $action = $_POST[‘action’];
switch($action) {

case ’startCalendar’:
$month = $_POST[‘month’];
$year = $_POST[‘year’];

if(($month == 0) || ($year == 0)) {
$thisDate = mktime(000date(“m”)date(“d”)date(“Y”));
} else {
$thisDate = mktime(000$month1$year);
}

echo 
<p style=”margin-bottom: 3px”> </p>

<form name=”changeCalendarDate”>
<select id=”ccMonth” onchange=”startCalendar($F(’ccMonth‘), $F(’ccYear‘))”>                                                                                                                                                                                                                                                                     <option value=”’$i .‘”>’date(“F”$monthMaker) .‘</option>                    </select>
<select id=”ccYear” onchange=”startCalendar($F(’
ccMonth‘), $F(’ccYear‘))”>                                                                                                                                                                                                                                                                                <option value=”’$i .‘”>’$i .‘</option>                    </select>
</form>

‘;

// Display the week days.
echo 
<p class=”calendarFloat” style=”text-align: center; background-color: #f0f2ff”><span style=”position: relative; top: 4px”>Mon</span></p>
<p class=”calendarFloat” style=”text-align: center; background-color: #f0f2ff”><span style=”position: relative; top: 4px”>Tue</span></p>
<p class=”calendarFloat” style=”text-align: center; background-color: #f0f2ff”><span style=”position: relative; top: 4px”>Wed</span></p>
<p class=”calendarFloat” style=”text-align: center; background-color: #f0f2ff”><span style=”position: relative; top: 4px”>Thur</span></p>
<p class=”calendarFloat” style=”text-align: center; background-color: #f0f2ff”><span style=”position: relative; top: 4px”>Fri</span></p>
<p class=”calendarFloat” style=”text-align: center; background-color: #cccccc”><span style=”position: relative; top: 4px”>Sat</span></p>

<p class=”calendarFloat” style=”text-align: center; background-color: #cccccc”><span style=”position: relative; top: 4px”>Sun</span>

‘;

// Show the calendar.
for($i=0$i<date(“t”,>
{
$thisDay = ($i + 1);
if(($month == 0) || ($year == 0)) {
$finalDate = mktime(000date(“m”)$thisDaydate(“Y”));
$today = mktime(000date(“m”)date(“d”)date(“Y”));
$fdf = mktime(000date(“m”)1date(“Y”));
$month = date(“m”);
$year = date(“Y”);
} else {
$finalDate = mktime(000$month$thisDay$year);
$fdf = mktime(000$month1$year);
}

// Skip some cells to take into account for the weekdays.
if($i == 0) {
$firstDay = date(“w”$fdf);
$skip = ($firstDay – 1);
if($skip < 0) { $skip = 6}

for($s=0$s<$skip$s++)
{
echo 
</date(“t”,>

<p class=”calendarFloat” style=”border: 1px solid #ffffff”>

‘;
}
}

// Make the weekends a darker colour.
if((date(“w”$finalDate) == 0) || (date(“w”$finalDate) == 6)) {
$bgColor = ‘#CCC’;
} else {
$bgColor = ‘#f0f2ff’;
}

// == Add any database query here using $finalDate as the timestamp for this date.

// Display the day.
echo 

<p class=”calendarFloat” id=”calendarDay_’. $thisDay .‘” style=”cursor: pointer”>

onMouseOver=”highlightCalendarCell(’calendarDay_‘. $thisDay .’‘)”
onMouseOut=”resetCalendarCell(’
calendarDay_‘. $thisDay .’‘)”>
<span style=”position: relative; left: 1px”>’
$thisDay.‘</span>

‘;
}
break;
}

?>

The final part is the one that ties it all together. This javascript is placed at the bottom of the page, within the < body > tags.

<script type=“text/javascript”>
startCalendar(0,0);
</script>

Now for a short explaniation…
If startCalendar(0,0) is called like so, with zeros, it defaults to the current month, if you have a look at the RPC file, at the top, you will notice there is a line that is if $month == 0 and $year == 0, then the date is date(”m”); (i think).

Next we are making the form for selecting the month and year, at the same time making the selected month and year (gotten by $month and $year) the current ones in the drop doen boxes.

Now we are just displaying the days of the week so the calendar is readable.
Now the difficult part, determining the timestamp incase we want to use the database.
Skipping some days to take into account days from the previous month, so the 1st of the month starts ont he proper week day, thats a tough one.
Then its just spitting out the calendar.

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Contributions
Why You Need A Slow Cooker Today

Slower cookers, or as they have been more affectionately called, crock-pots, truly are a boon to anyone in charge of preparing full-scale meals under time restraints and other restrictions. With advancements in slow cooker technology along with their ease of use, coupled with a plethora of recipes designed specifically for …

Contributions
New Milestone Eclipsed

Nodstrum is celebrating a milestone today when it signed up its 100,000th subscriber to its Ultimate Holistic Care Package Program. This is just another feather in our cap as we continue to grow as an organization. It also shows that people continue to patronize our products and services and that …

Contributions
My Car Was Damaged At The Garage – Who’s Coughing Up?

When you leave your car with a garage or mechanic, you’re effectively giving them your trust to not damage your vehicle or affect it negatively in any way, and why would they? It’s their job to make sure your vehicle works how it’s meant to, and any negative impact they …