THIS HAS BEEN UPDATED, PLEASE SEE THIS POST: http://nodstrum.com/2007/06/27/mysql-calendar/

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, its 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(0, 0, 0, date("m"), date("d"), date("Y"));
    } else {
      $thisDate = mktime(0, 0, 0, $month, 1, $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(0, 0, 0, date("m"), $thisDay, date("Y"));
        $today = mktime(0, 0, 0, date("m"), date("d"), date("Y"));
        $fdf = mktime(0, 0, 0, date("m"), 1, date("Y"));
        $month = date("m");
        $year = date("Y");
      } else {
        $finalDate = mktime(0, 0, 0, $month, $thisDay, $year);
        $fdf = mktime(0, 0, 0, $month, 1, $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.

And here is the Piece De Resistance, if you can call it that…
http://res.nodstrum.com/calendar/

And now for the downloads:
Calendar System ZIP