How to Create a Calendar With CSS

Written by robert godard
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Calendar With CSS
Create a dynamic calendar for your website with CSS. (Thinkstock/Comstock/Getty Images)

You can create a dynamic calendar to use on your website using just CSS styling, a PHP file and a little bit of HTML. The only parameter you will have to define is the month and the year, and the calendar will automatically be created on your website. A little bit of coding experience is necessary to make this work, but you will not need to change most of the code at all.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Open a text editor, such as Notepad or TextEdit. Start with the header. Type in <head> into the top of the file. Click the Enter key, and then enter <style type="text/css"> . Hit the Enter key again.

  2. 2

    Type in the following code:

    / calendar /

    table.calendar { border-left:1px solid #999; }

    tr.calendar-row { }

    td.calendar-day { min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }

    td.calendar-day:hover { background:#eceff5; }

    td.calendar-day-np { background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }

    td.calendar-day-head { background:#ccc; font-weight:bold; text-align:centre; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }

    div.day-number { background:#999; padding:5px; colour:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:centre; }

    / shared /

    td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }

    This will be your CSS styling.

  3. 3

    Type in </style></head>. This will close your style and head tags. Type in <body> To begin your body. As an alternative, you can enter the PHP in the next Step into any existing PHP file, in order to insert a calendar into an already-created page.

  4. 4

    Insert the following code:

    / draws a calendar /

    function draw_calendar($month,$year){

    / draw table /

    $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';

    / table headings /

    $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

    $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

    / days and weeks vars now ... /

    $running_day = date('w',mktime(0,0,0,$month,1,$year));

    $days_in_month = date('t',mktime(0,0,0,$month,1,$year));

    $days_in_this_week = 1;

    $day_counter = 0;

    $dates_array = array();

    / row for week one /

    $calendar.= '<tr class="calendar-row">';

    / print "blank" days until the first of the current week /

    for($x = 0; $x < $running_day; $x++):

    $calendar.= '&lt;td class="calendar-day-np"&gt;&#160;&lt;/td&gt;';
    
    $days_in_this_week++;
    

    endfor;

    / keep going with days.... /

    for($list_day = 1; $list_day <= $days_in_month; $list_day++):

    $calendar.= '&lt;td class="calendar-day"&gt;';
    
      /* add in the day number */
    
      $calendar.= '&lt;div class="day-number"&gt;'.$list_day.'&lt;/div&gt;';
    
    
    
      /** QUERY THE DATABASE FOR AN ENTRY FOR THIS DAY !!  IF MATCHES FOUND, PRINT THEM !! **/
    
      $calendar.= str_repeat('&lt;p&gt;&#160;&lt;/p&gt;',2);
    
    
    
    $calendar.= '&lt;/td&gt;';
    
    if($running_day == 6):
    
      $calendar.= '&lt;/tr&gt;';
    
      if(($day_counter+1) != $days_in_month):
    
        $calendar.= '&lt;tr class="calendar-row"&gt;';
    
      endif;
    
      $running_day = -1;
    
      $days_in_this_week = 0;
    
    endif;
    
    $days_in_this_week++; $running_day++; $day_counter++;
    

    endfor;

    / finish the rest of the days in the week /

    if($days_in_this_week < 8):

    for($x = 1; $x &lt;= (8 - $days_in_this_week); $x++):
    
      $calendar.= '&lt;td class="calendar-day-np"&gt;&#160;&lt;/td&gt;';
    
    endfor;
    

    endif;

    / final row /

    $calendar.= '</tr>';

    / end the table /

    $calendar.= '</table>';

    / all done, return result /

    return $calendar;

    }

    / sample usages /

    echo '<h2>June 2011</h2>';

    echo draw_calendar(6,2011);

    Simply replace "June 2011" with the month you wish to display and "6,2011" with the number of the month and the year you wish to use.

  5. 5

    Save your file as "file.php." Replace "file" with the name you wish to give to your website page.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.