Grow your CSS skills. Land your dream job.

Last updated on:

Build a Calendar Table

<?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);

?>

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

  8. Permalink to comment#

    My small change to have the week start on Monday:

    $dayOfWeek = $dateComponents['wday'] - 1;     
    // fix for monday start
    if ($dayOfWeek < 0) {
        $dayOfWeek = 6;
    }
    

    Also just change the $daysOfWeek array.

    Hope it works :)

  9. :: kevin :: UK ::
    Permalink to comment#

    Awesome, love it.
    Thank you for a great bit of code, and to the guys that left feedback with optional changes that really do improve the calendar’s functionality

  10. Dery
    Permalink to comment#

    hi ,i’m a student in senior high school (newbie) , i implemented this in fuelphp but there are some bug ,

    <?php

    class Controller_Calendar extends Controller_Timetable{
    public function before(){
    parent::before();
    }

    public function build_calendar($month,$year) {

    // 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 = "";
    $calendar .= "$monthName $year";
    $calendar .= "";

    // Create the calendar headers

    foreach($daysOfWeek as $day) {
    $calendar .= "$day";
    }

    // Create the rest of the calendar

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

    $currentDay = 1;

    $calendar .= "";

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

    if ($dayOfWeek > 0) {
    $calendar .= " ";
    }

    $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 .= "";

    }

    $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT);

    $date = "$year-$month-$currentDayRel";

    $calendar .= "$currentDay";

    // Increment counters

    $currentDay++;
    $dayOfWeek++;

    }

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

    if ($dayOfWeek != 7) {

    $remainingDays = 7 - $dayOfWeek;
    $calendar .= " ";

    }

    $calendar .= "";

    $calendar .= "";

    return $calendar;

    }
    $dateComponents = getdate();
    $i = 1;
    $month=1; //Numeric Value
    while($i

    ErrorException [ Parsing Error ]: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION in $dateComponents = getdate();

    can all of you explain this problem with me ?

  11. etob
    Permalink to comment#

    Very good script. Concise and short. Thanks

    My small changes to highlight specified dates:

    Before calling main function: $dateArray = array('FEB04','MAR20');

    Inside main function: $monthNameShort = strtoupper(substr($monthName,0,3));

    Inside while ($currentDay <= $numberDays)' loop:

    $date = "$monthNameShort$currentDayRel";
    if (in_array($date,$dateArray))
        $calendar .= "<td class='day' title='$date'><b>$currentDay</td>"; //bold
            else 
        $calendar .= "<td class='day' title='$date' style='color:grey;'>$currentDay</td>"; //grey
    
  12. Mehul Boricha
    Permalink to comment#

    Thanks a lot.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".