Sunday, March 31, 2013

Building a Simple Monthly Calendar

In this tutorial we are going to learn how to build a simple calendar in PHP. You have seen many of those calendar date pickers mostly in Javascript. This PHP based one has a slightly different purpose - instead of populating an input field, it outputs links for the different dates and can be used for example as a monthly archive in a dynamic DB-driven site.


We will build this calendar following good coding practices and keeping the login in one PHP file and the presentation in one HTML file.


Let's start:


First we need to define the current date OR a date coming by POST after the calendar form is submitted:


$today=getdate();
$year=$_POST['year']?$_POST['year']:$today['year'];
$month=$_POST['month']?$_POST['month']:$today['month'];
$day=$_POST['day']?$_POST['day']:$event['day'];


PHP getdate() function returns an array of year, month and day. We assign this to $today variable and use it to define the calendar day, year and month - if they are coming from POST, the POST values have priority - otherwise we use $today values.


Then we need to define the number of days in the given month. We use function cal_days_in_month() for that:


$numdays=cal_days_in_month(CAL_GREGORIAN, $month, $year);


Now there's one specific. We don't want the calendar rows to be different number in different month. For that we'll make sure the calendar looks like the printed calendars and like this event calendar software by defining the week start day:


// calculate 'extra' days - these which need to come on the first
// line - like 30-31- -- - -- - -- - -- - 1
$estart=(7-$wday)+28;
$extra=$numdays-$estart;


That's it, now we only need to include the design template:


require_once("mc_template.html");


The rest is easy - display year and month dropdows:


<select name="year" onchange="this.form.submit();">
<php
for($i=$start_year;$i<=2050;$i++)
{
if($i==$year) $selected='selected';
else $selected='';
echo "<option $selected value=$i>$i</option>";
}
?>
</select>

<select name="month" onchange="this.form.submit();">
<php
for($i=1;$i<=12;$i++)
{
if($i==$month) $selected='selected';
else $selected='';
echo "<option $selected value=$i>".$lmonths[$months[$i]]."</option>";
}
// end PHP
</select>


And the calendar itself in a HTML table:



<p;?php
if($extra<0) $extra=0;
for($i=$estart;$i<$numdays;$i++)
{
// ...
// the full code can be downloaded at the bottom
}
?>


And your calendar is ready! You can download the free Microcal script that uses this same code here

No comments:

Post a Comment