Rarely Simple

Calendar

I'm a big fan of Foundation by Zurb. I was first introduced to it through their ZURB Wired 2011 and I have used it in nearly every web project since.

During this time, I have noticed a growing trend to move away from the traditional seven column grid layout for calendars online. Yet I find more and more that site owners and users are still looking for the traditional layout. Perhaps forward-thinking web designers feel about traditional calendar layouts the way interior designers feel about ceiling fans?

The catch is they are often effective or at least requested by site owners. If that's your situation, then this may be for you.

Download
  • June
  • Sunday Sun
    Monday Mon
    Tuesday Tue
    Wednesday Wed
    Thursday Thu
    Friday Fri
    Saturday Sat
  • 28
    29
    30
    31
    1
    2
    3
  • 4
    5
    6
    7
    8
    9
    10
  • 11
    12
    13
    14
    15
    16
    17
  • 18
    19
    20
    21
    22
    23
    24
  • 25
    26
    27
    28
    29
    30
    1

Basic

The calendar is built on a seven column grid. Using the css classes of small-1, medium-1 or large-1, you indicate on what size of display that you wish to view the seven column layout. Any sizes excluded from entry will display each day in a single row (agenda view). This can be valuable when the day's content is too dense for small displays but fine for large. The example below renders the seven column layout only on large displays.

HTML
<ul class="calendar"> <li class="title">June 4-10</li> <li class="day-header"> <div class="large-1 day">Sun</div> <div class="large-1 day">Mon</div> <div class="large-1 day">Tue</div> <div class="large-1 day">Wed</div> <div class="large-1 day">Thu</div> <div class="large-1 day">Fri</div> <div class="large-1 day">Sat</div> </li> <li class="week"> <div class="large-1 day">4</div> <div class="large-1 day">5</div> <div class="large-1 day">6</div> <div class="large-1 day">7</div> <div class="large-1 day">8</div> <div class="large-1 day">9</div> <div class="large-1 day">10</div> </li> <!-- Repeat for additional weeks --> </ul>
Rendered HTML
  • June 4-10
  • Sun
    Mon
    Tue
    Wed
    Thu
    Fri
    Sat
  • 4
    5
    6
    7
    8
    9
    10

To extend to a full month just add additional li.week items.


Advanced Options

There are a number of things you can do to enhance the presentation of your calendar.

Day Customizations

Days in Previous Month

Add the class previous-month to the div.day object.

Days in Next Month

Add the class next-month to the div.day object.

Today

Add the class today to the div.day object.

Span Multiple Days future enhancement

To span multiple days change the number on the div.day object. For example, to span three days during a single week use <div class="large-3 days">...</div>

Other Customizations

Month Selection Controls future enhancement

To be designed.

Work Week View future enhancement

To display the week or month by work days (5 columns), add the class work-week to the ul.calendar object.


Install in Your Project

Adding Calendar to your Foundation-based project is easy--well it will be.

  • Download Calendar for Foundation

    This is available as a compressed zip file.

  • Place the foundation.calendar.css with the other foundation css file(s).

    Keeping calendar in a separate file allows you to keep Foundation up-to-date without having to reinstall the calendar code.

  • Add to your HTML after the foundation.css or foundation.min.css entry and before your app.css or other custom css entry.

    This will allow you to use your same custom css file to tailor the calendar appearance to your theme.

  • Knock yourself out!

    Okay not literally. I hope you find this useful.