Making A CSS Based Calender


With some simple CSS applied to an unordered list, we can quickly and easily make a nicely formatted calender that’s easily lightweight and updated.

To begin, we need to determine the width of our calender, so pick a size you’d like to use for the boxes that the dates will go in. In this example, I’ll be using 30 pixel by 30 pixel boxes. Next, I want to put a 5px solid border around each box that will be the same color as my page background. This will space the boxes 10px apart while avoiding messy work-arounds and problems with box model behaviors between IE and other browsers. Thus our overall size of each “day” box, including that border is 40 by 40 pixels. So, to get the overall width of our calender, we multiply 40 by 7 (the number of days in the week) and get a total width of 280 pixels.

With that out of the way, we can start coding our calender. Let’s do the HTML first and get that taken care of. We’ll start by creating a container to hold our calender, then we’ll put the month inside a H2 tag and we’ll finish things off with an unordered list containing the calender itself.

[html]

July, 2007

  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

[/html]

Note that we have two classes inside our list– “day” which is a textual representation of the day of the week, and “num” which is the actual date.

Now let’s write some code (I’m also going to set the text size, font and colors here as well).

[css]
#cal {
width:280px;
font-family:arial, helvetica, sans-serif;
font-size:9pt; /* this will fit in our 30x30px box nicely */
color:#000;
text-align:center;
line-height:30px;
}
[/css]

Notice above that we also gave the “cal” div and all elements inside of it a line-height of 30 pixels– the same as the height of our box (minus the border). This will ensure that all of the text is vertically centered.

Alright, now let’s move on to our header. We’ll make the header 10px less than our overall calender width, and put a 5px margin on the left, right, top and bottom, so that it will be spaced properly and will appear lined up with the numbers bwlow it.

[css]
#cal h2 {
width:270px;
margin:0 5px 5px 5px;
font-size:12pt;
background:#004a80;
color:#fff;
}
[/css]

Now we can set the styles for the list itself. This is pretty straightforward. We simply define the width and set the margin and padding both to zero.

[css]
#cal ul {
width:280px;
margin:0;
padding:0;
}
[/css]

Next, all of our LI tags within the calender, regardless of whether or not they’re used as a label for the day of the week or as a number, will share some of the same properties, such as the removal of their bullets, their height, width, border size and color, and vloat value. So, let’s define those now.

[css]
#cal ul li {
width:30px;
height:30px;
display:block;
float:left;
list-style:none;
border:5px solid #fff;
margin:0;
}
[/css]

Now all that’s left is to format the appearance of the day labels, and then the actual dates.

[css]
#cal ul li.day {
background:#666;
color:#fff;
font-weight:bold;
}

#cal ul li.num { background:#ccc; }
[/css]

Our calender is now finished! Oh, but wait! Go back and take a look at that markup– notice now there’s an event scheduled for July 2nd? It’s my wedding anniversary (7yrs). We need to denote it as being a special day, so that visitors can easily see that we’re linking to additional information.

See how the link has an “event” class assigned to it? Let’s define the CSS for that. We’ll just change the colors and make the text bold– we also have to m ake the link a block element and assign it dimensions, so that it fills the entire space for that date block.

[css]
#cal a.event {
display:block;
width:30px;
height:30px;
background:#6dcff6;
text-decoration:none;
color:#004a80;
font-weight:bold;
}
[/css]

NOW our calender is finished. You can view the final result here. Also, here is an example of the same technique applied to a smaller calender, illustrating how you would do a 1px border around each list item, for a more condensed look.

Blogging

{ 9 comments… add one }

10 comments on “Making A CSS Based Calender

  1. vladimir_sumy on said:

    Greatest idea!
    I admire!

  2. mowgli on said:

    appreciates and great one !!

  3. Symbiote on said:

    It is xtra Cool ..
    I am looking forward for your future tutorials ;)

  4. Wow I feel like a pro already. Thank you again.

  5. Thank you for the great idea.

    I combined your calender with the CSS-Tooltips and extended it for the whole year 2008.

    Here is the result:
    http://www.cvjm-achern.de/termine.html

  6. I forgot:
    the calender is not visible for InternetExplorer older than Version 7.0.

  7. indika on said:

    nice thought. thank you for sharing your tute.

  8. Paul Yoakum on said:

    I’ve been trying to figure how to do this for a while. I looked at several examples and got really frustrated by a number of sites that wanted to make things significantly more complex. This, on the other hand, was concise and well written. Thank you.

  9. Infuse on said:

    Thanks for sharing. Nicely done, short, simple and easy to manage.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment