Calendario: A Flexible Calendar Plugin

Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month.

Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc().

The calendar designs are based on these two beauties found on Dribbble:

The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. Each “cell” will contain the date and weekday (if applicable) and we control the height of the rows by setting the right class to the container (four, five or six rows). The styling for the default calendar is defined in calendar.css.
Note that a cell that contains some content/event will look as follows:

Note that the weekday of each cell is hidden by default because we have the calendar head with the weekdays. The ones in the cell are especially for the case when we apply media queries to reset the layout of the calendar to be stacked vertically. Here we will want to show the weekdays for each day.

It’s clear that a calendar could/should be represented by a table, but due to some table rendering differences between the browsers (especially IE9), we chose not to use it. You can of course adjust the plugin to output a table, though.

The important part of making the calendar grid fluid is the styling of the row and the div (or the “cell”):

So, we define different heights depending on the amount of rows we’ll have, using calc() where we know that the result is not a round number. For the inner div we will set the width to be 100 divided by 7.

// return the year that is currently being viewed
getYear()
// return the month that is currently being viewed (1-12)
getMonth()
// returns the name of the month that is currently being viewed
getMonthName()
// returns the content division inside the cell associated to day "day"
getCell( day )
// sets the data to the calendar. Merges the contents of the passed caldata with the one already set (if any)
setData( caldata )
// shows the calendar for today's month and year
// month is from 1-12
gotoNow( callback )
// shows the calendar for month "month" and year "year"
// month is from 1-12
goto( month, year, callback )
// goes back one month in the calendar
gotoPreviousMonth( callback )
// goes back one year in the calendar
gotoPreviousYear( callback )
// goes further one month in the calendar
gotoNextMonth( callback )
// goes further one year in the calendar
gotoNextYear( callback )

You can use setData to add content to the calendar. You can see examples for that in the demo files.

The basic styling is defined in the calendar.css file and you can see examples of how to modify the calendar style and add to it in the custom CSS files.

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

I love this calendar, but it’s rendering strangely in IE10 Preview. Sometimes the left borders on days are missing, the days on the far right are too wide and the last days of the month are running outside the calendar container. I took a screenshot and it’s here: http://www.screencast.com/t/BTmqi75mgh

To add to this, it looks like IE10 is calculating the width of each day correctly, but is wrapping the week at six days, so Sunday is going onto another line, which leaves each week with six days and tacks on another row at the bottom, which overflows the container.

Huh, weirder yet, this only seems to happen when I have the IE10 window maximized. If I don’t have it maximized and stretch the window horizontally so it is as wide as if it were full screen, everything looks great.

Hi Fernando, what exactly does not work for you? You can see an example of an event that I’ve added to the demos (1st of January 2013, make sure to clean your browser cache) and it works fine. Let me know, cheers, ML