treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Build a Calendar Table

Last updated on:

<?php

function build_calendar($month,$year,$dateArray) {

     // Create array containing abbreviations of days of week.
     $daysOfWeek = array('S','M','T','W','T','F','S');

     // What is the first day of the month in question?
     $firstDayOfMonth = mktime(0,0,0,$month,1,$year);

     // How many days does this month contain?
     $numberDays = date('t',$firstDayOfMonth);

     // Retrieve some information about the first day of the
     // month in question.
     $dateComponents = getdate($firstDayOfMonth);

     // What is the name of the month in question?
     $monthName = $dateComponents['month'];

     // What is the index value (0-6) of the first day of the
     // month in question.
     $dayOfWeek = $dateComponents['wday'];

     // Create the table tag opener and day headers

     $calendar = "<table class='calendar'>";
     $calendar .= "<caption>$monthName $year</caption>";
     $calendar .= "<tr>";

     // Create the calendar headers

     foreach($daysOfWeek as $day) {
          $calendar .= "<th class='header'>$day</th>";
     } 

     // Create the rest of the calendar

     // Initiate the day counter, starting with the 1st.

     $currentDay = 1;

     $calendar .= "</tr><tr>";

     // The variable $dayOfWeek is used to
     // ensure that the calendar
     // display consists of exactly 7 columns.

     if ($dayOfWeek > 0) { 
          $calendar .= "<td colspan='$dayOfWeek'>&nbsp;</td>"; 
     }
     
     $month = str_pad($month, 2, "0", STR_PAD_LEFT);
  
     while ($currentDay <= $numberDays) {

          // Seventh column (Saturday) reached. Start a new row.

          if ($dayOfWeek == 7) {

               $dayOfWeek = 0;
               $calendar .= "</tr><tr>";

          }
          
          $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT);
          
          $date = "$year-$month-$currentDayRel";

          $calendar .= "<td class='day' rel='$date'>$currentDay</td>";

          // Increment counters
 
          $currentDay++;
          $dayOfWeek++;

     }
     
     

     // Complete the row of the last week in month, if necessary

     if ($dayOfWeek != 7) { 
     
          $remainingDays = 7 - $dayOfWeek;
          $calendar .= "<td colspan='$remainingDays'>&nbsp;</td>"; 

     }
     
     $calendar .= "</tr>";

     $calendar .= "</table>";

     return $calendar;

}

?> 

Usage

Build a calendar of the current month:

<?php

     $dateComponents = getdate();

     $month = $dateComponents['mon']; 			     
     $year = $dateComponents['year'];

     echo build_calendar($month,$year,$dateArray);

?>
View Comments

Comments

  1. Permalink to comment#

    How would i alter this to highlight the current day?

    • Permalink to comment#

      Add this two vars to the top of script:

      
      $today_date = date("d");
      $today_date = ltrim($today_date, '0');
      

      Then change the date loop to the following:

      
       while ($currentDay <= $numberDays) {
      
                // Seventh column (Saturday) reached. Start a new row.
      
                if ($dayOfWeek == 7) {
      
                     $dayOfWeek = 0;
                     $calendar .= "</tr><tr>";
      
                }
      
                $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT);
      
                $date = "$year-$month-$currentDayRel";
      		  
      	  if($currentDayRel == $today_date ){  $calendar .= "<td class='day' id='today_date ' rel='$date'><b>$currentDay</b></td>"; } 
      
      		  else { $calendar .= "<td class='day' rel='$date'>$currentDay</td>"; }
      
                // Increment counters
      
                $currentDay++;
                $dayOfWeek++;
      
           }
      

      Use the id=’today_date ‘ in your css to change the days appearance….

      Hope this helps…
      - Jason

  2. These functions may also be used. The first creates a calendar a specific month/year, and the second creates a full year calendar from specified month/year.

    //For Specific Month and Year
    $month = "3"; //Number of month (1-12)
    $year = "2010"; //Four digets
    echo build_calendar($month,$year,$dateArray);

    //For all Months in Specific Year
    $year = "2010";
    $i = 1;
    $month=1; //Numeric Value
    while($i <'s= 12){
    echo build_calendar($month,$year,$dateArray);
    $month=$month+1;
    $i++;}

    • The second code should actually read:

      //For all Months in Specific Year
      $year = "2010";
      $i = 1;
      $month=1; //Numeric Value
      while($i <'s= 12){
      echo build_calendar($month,$year,$dateArray);
      $month=$month+1;
      $i++;}

    • Mark
      Permalink to comment#

      This is pretty neat. Thank you.
      I still cannot get the complete year to work however.
      Any ideas?

    • seuser
      Permalink to comment#

      while($i <= 12){
      instead of while($i <'s= 12){

  3. Zachary

    Could you post on how to have events (localhost database) displayed in the calendar and also have calendar controls such as picking of the month, year and next & previous month. Thanks

    Zachary (zachary007_4@hotmail.com)

    • Permalink to comment#

      Just query your database by the date of the event… explode the string so that you only get the day in a one digit format. Then in the date print loop (see my above code), check to see if the date queried equals the $currentDay. If it does, print the event(s) data. It will re-query every time with the new date.

      Example

      $result = mysql_query("SELECT event_title FROM events WHERE event_date = '".$currentDay."'") or die(mysql_error());
      
      $row = mysql_fetch_array($result);
      
      $num_results = mysql_num_rows($result); 
      if ($num_results > 0){  echo $row['event_title']; }
       else{  } 

      Put the code while ($currentDay <= $numberDays) { } loop…

      while ($currentDay <= $numberDays) {
      
                // Seventh column (Saturday) reached. Start a new row.
      
                if ($dayOfWeek == 7) {
      
                     $dayOfWeek = 0;
                     $calendar .= "</tr><tr>";
      
                }
      
                $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT);
      
                $date = "$year-$month-$currentDayRel";
      
                if($currentDayRel == $today_date ){  $calendar .= "<td class='day' id='today_date ' rel='$date'><b>$currentDay</b>";
      
      $result = mysql_query("SELECT event_title FROM events WHERE event_date = '".$currentDay."'") or die(mysql_error());
      
      $row = mysql_fetch_array($result);
      
      $num_results = mysql_num_rows($result); 
      if ($num_results > 0){
      $i=0;
      while($i <= $num_results)  { 
      $calendar.= $row['event_title']; }
      }
       else{  } 
       
      $calendar.= "</td>"; } 
      
                        else { $calendar .= "<td class='day' rel='$date'>$currentDay</td>"; }
      
                // Increment counters
      
                $currentDay++;
                $dayOfWeek++;
      
           }

      Double check my request query loop, but that should work…

  4. anup
    Permalink to comment#

    It’s really a good script and idea to implement. Nice one! Dev. can use / customize with his needs. ;)

  5. Questions, what is the third argument $dateArray for? Seems to me there’s no reference in the function for this argument.

    Great tool. I wish there was a way to change the month but this would require ajax or using an iframe.

    • Permalink to comment#

      Change:

            $calendar .= "<td class='day' rel='$date'>$currentDay</td>";
      

      To something like this (displays the date information next to the date):

            $calendar .= "<td class='day' rel='$date'>$currentDay";
            if(isset($dateArray[mktime(0, 0, 0, $month, $currentDay, $year)])){
            $calendar.=$dateArray[mktime(0, 0, 0, $month, $currentDay, $year)];
            }
            $calendar.="</td>";
      

      Or this (links to a page for specific dates):

            $calendar .= "<td class='day' rel='$date'>";
            if(isset($dateArray[mktime(0, 0, 0, $month, $currentDay, $year)])){
            $calendar.="<a href=\"$dateArray[mktime(0, 0, 0, $month, $currentDay, $year)]\">$currentDay</a>";
            }else{
            $calendar.=$currentDay;
            }
            $calendar.="</td>";
      

      and build the array elsewhere. See the page I linked to my name for output (I still need to clean up some formatting).

  6. Navee
    Permalink to comment#

    Likewise…what IS the 3rd argument $dateArray for? I’m getting undefined variable errors as a result. Removed both references of it from the code and the Calendar appears fine without errors.

  7. Irene
    Permalink to comment#

    Hi
    I am learning to put a calendar on a web blog and came across this thread. Could you please tell me what is the full script etc for the calendar please…..

    Thanks in advance
    Irene

Leave a Comment

Use markdown or basic HTML and be nice.