HTML + CSS = A Calendar? Cool!

• Permalink
• Posted: December 20, 2008
• By: Tieson
• Tags: calendar, widget, CSS

I've always liked those little date/calendar icons some blogs have for each of their entries, but I could never figure out how they managed to make the date correct. Then I found this article: Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly. The author, one Shirley E. Kaiser, M.A., wrote a nice article on one possible way of using HTML and CSS to create the appearance of a date icon.

I thought this idea was pretty neat, and adopted the code she presented for this website. With a little imagination, you can pretty much use this same idea for just about anything.

[Edit:] I redid my site again, and am not using this code anymore, but I still think it's cool.[/Edit]

My widget

As I mentioned, I made use of her example to create the calendar icon. I first hard-coded the month, date, and year to get the proportions how I wanted them. Once I had the CSS in place, it was a simple matter of adding a sprinkle of PHP to the template to set the month, date, and year.

Try it yourself!

If you like this little bit of CSS magic, feel free to use the following code in your own projects. Just take a moment to stop by Ms. Kaiser's web site and say thanks.

calendar.css

/*{ Calender Styling } */

.calender {

float: left;

width: 50px;

height: 50px;

border: solid 1px #404040;

text-align: center;

color: #404040;

background-color: #fff;

padding: 0;

margin: 5px;

}

.month, .date, .year { padding: 1px 0; margin: 0; }

.month {

color: #fffbff;

text-transform: uppercase;

font-size: 9px;

background: #880000 url("images/titlebar-red.png")

repeat-x;

border-bottom: solid 1px #404040;

}

.date {

font-size: 14px;

font-weight: 600;

color: #880000;

}

.year { font-size: 8px; padding: 0; }

calendar.html

<!-- calendar HTML -->

<div class="calender">

<p class="month">

</p>

<p class="date">

</p>

<p class="year">

</p>

</div>

For this sample, I used a PHP function, getdate, to have the PHP engine build me an array of the day, month, year, etc. of whenever the page is served. If you are loading a previous entry, say, from a database, you will want to pass a time-stamp into the function. I found this format gave me the best results:

Month 00 0000 HH:MM:SS

calendar.php

<?php

// getdate() with no arguements will get the current

// date/time from the system clock.

// Vist http://us2.php.net/getdate to see the entire date

// array generated by getdate().

$date=getdate();

// trim month to three characters.

// CSS will transform the remaining part of the month

// into UPPERCASE.

$month=substr( $date['month'], 0, 3 );

$day = $date['mday'];

$year = $date['year'];

?>

<!-- calendar HTML -->

<div class="calender">

<p class="month">

<?php echo( $month ); ?>

</p>

<p class="date">

<?php echo( $day ); ?>

</p>

<p class="year">

<?php echo( $year ); ?>

</p>

</div>

Download

Get the source code for this tutorial here: calendar.zip