*update* I have re-done this tutorial with unordered lists and css sprites. Check it out here.

Calendars are such an everyday object for most people – they are literally everywhere, in print, on our cell phones, computers and on the web. I recently had to design and code a calendar at work and learned a few things along the way. I thought I would show you guys my work process and share some code with you.

Check out the Yoga Get Started Guide on the Men’s Health website »


The Design

First off lets start out with the design. I designed the layout in photoshop. One thing that helps with designing is to make your PSD file look as real as possible so there’s no guesswork when it comes to coding on things like color, dimension or size.

So the challenging part of this the coding the calendar. I’m not the best css-wizzard out there, but I can hold my own. I knew the design was going to be a bunch of divs floated left with some margins going on.

A few things I learned:

Behavior of a:visted states: they remain in their visited state sitewide!!!

Behavior of display:block on an anchor link – this makes the whole calendar day a clickable link. Not sure why I did not know this before, but hey – my lightbulb went on!

So with this new knowledge in hand I knew that all the magic for this design was going to happen with the link states.

Layout

The layout of the calendar will be pretty basic: a container div, and a div for each day:

Each day is 105×105px square with 1px margin on the right and bottom. The client wanted this to look like a real calendar so there are 7 days in each row. This means the container div needs to be at least 742px wide. I threw in a sprinkle of a few extra pixels for fun. The divs will be floated left and displayed inline (because IE is stupid and doubles margins on floated objects). I also wanted to hide any text just in case any text ran long. Take a look at the basic CSS and HTML for the layout:

Basic CSS

#calendarContainer {
width:745px;
}

.day {
width:105px;
height:105px;
overflow:hidden;
display:inline;
float:left;
margin-right:1px;
margin-top:1px;
}

Basic HTML

<div id=”calendarContainer</div>

<div class=”day”>

<a href=”#”>
<h3>1</h3>

</a>

</div><!– end day –>

</div><!– end calendar container–>

I should also note that I have a (good) habbit of comenting on closing divs just so I can tell what the hell is going on :)

Background Images

Then I went back to my .PSD and sliced up the 4 background images and saved them as .gifs:
Blank Days:

Normal Days:

Hover State

Visited State

…and more CSS!

So now that we have our basic layout and images lets get down to the cool parts: The link states!

First off we have the blank days that make it look like an actual calendar:

.blankDay {
width:105px;
height:105px;
background:url(../images/day-blank.gif);
margin-right:1px ;
margin-top:1px;
overflow:hidden;
display:inline;
float:left;

}

Next up we define the background image for the days with content and the hover state. Setting the link to display as a block level element makes the whole div clickable! Yay!

.day a {
width:105px;
height:105px;
background:url(day-normal.gif);
background-repeat:no-repeat;
text-decoration:none;
display: block;
color:#3e3d3d;

}

.day a:hover {
background:url(day-hover.gif);
background-repeat:no-repeat;
width:105px;
height:105px;
display: block;
color:#ffffff;
}

.day a:visited {
background:url(day-visited.gif);
background-repeat:no-repeat;
width:105px;
height:105px;
display: block;
color:#7f7e7e !important;
}

Typography

Next up we define the typography and the colors of the Day # on all the link states:

.day h3 {
font-size:33px;
font-weight:bold;
color:#982302;
float:right;
margin-top:15px;
margin-right:15px;
}

a:hover h3 {
color:#ffffff !important;
}

a:visited h3 {
color:#7f7e7e !important;
}

The Finished Product!!!

If all goes well you should have a nice cleanly coded calendar like this:


[23] Comments
Posted in Tutorials, Web 2.OH, Web Design, design