demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Calendar Example

HTML5 Calendar With CSS3 and Microdata

html / elements

Estimated reading time: 2 minutes, 30 seconds

As part of the next major revision of this website, I wanted an archive page that would display thumbnails of articles for each month in a calendar format. I will explain the construction of this calendar backwards: in this entry, I’ll talk about the final markup and CSS produced, with a calendar showing a single month; in future articles, I’ll show the , and code used to set the calendar to any month.

The calendar I envisioned for the site had a few particular features:

  • first, it would use pure markup. While there are many calendar web page creation tools out there, most of them produce calendars using tables. While this isn’t wrong – a calendar is tabular data, after all – I wanted to see if it was possible to create a calendar using the minimum HTML5 markup possible while retaining semantic richness.

  • Any month displayed would show the days of the previous month, along with the days of the following month. For example, if the month was June 2011, with the 1st of June falling on a Wednesday, the first line of the calendar would include May the 29th, 30th, and 31st (the Sunday, Monday and Tuesday beforehand) and the final line the 1st and 2nd of June (Friday and Saturday at the end of the month). These dates would be shown in different colours from those of the current month.

  • Days with a single digit, like the 1st, would have a leading 0 (so January 1 would become 01).

Calendar Markup

The construction of the HTML5 calendar is based on the <time> element. <time> has one required attribute, date time, the value for which must appear in a particular format (yyyy-mm-dd) with an optional timezone offset. So the elements for a June 2011 calendar would look something like this:

<time datetime="2011-06-01">01</time><time datetime="2011-06-02">02</time>

I also wanted each date to be a link, so the final markup would be something like this:

<section id=calendar>
<h1>June 2011</h1>
  • <time datetime=2011-05-29><a href=#>29</a></time><time datetime=2011-05-30><a href=#>30</a></time>
  • <time datetime=2011-05-31><a href=#>31</a></time>
    <time datetime=2011-06-01><a href="#">01</a></time>
    </section>

    Calendar CSS

    Each date on the calendar had to be a square of the same dimension, and seven squares had to fall on a single line. Rather than using the extra markup of a table, I used to achieve the same effect:

    html, body { font-family: Helvetica Nueu, Helvetica, Arial, sans-serif; }
    section#calendar time a { display: block; width: 110px; height: 110px; margin: 5px 5px 0 0; padding: 3px 3px 0 0; color: #f55b2c; text-decoration: none; }
    section#calendar time a:hover { color: #000; }
    time { display: inline-block; width: 120px; height: 120px; margin: 4px; text-align: right; font-size: x-large; font-weight: 900; border: 1px solid #c3c7c7; border-radius: 5px; background: #fff; }
    time.notmonth { background: #777; }
    section#calendar { width: 970px; }

    Dates displayed outside the current month receive a class of not month, completing the calendar.

    This markup creates a static calendar for a specific month, but requires manual coding. Our next step is to generate the appropriate <time> markup for any calendar month, for which we will use .

    comments powered by Disqus

    This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.