Tutorial: Creating a Responsive Calendar


[how to get your ex back](http://getyourextips.com/ "how to get your ex back")
by [John Williams](http://www.searchdiscovery.com/about/team/john-williams/), Creative Director Building the new site for Atlanta Ballet provided a lot of fun learning experiences and some really cool challenges to tackle. One issue was the performance calendar. Since our focus was on making the site accessible on a broad range of devices and screen sizes, it was important that we created a calendar that scaled well on mobile devices, but still presented like a traditional calendar on desktop screens. Most calendar plugins are developed using tables. It makes sense semantically, it's all tabular data. But tables are very rigid in how they're rendered. It's difficult to change the shape with just CSS. Our solution was to create a calendar using an unordered list as the structure. If you think about it, a calendar is just a list of days, so it still makes semantic sense. Lists are also much friendlier to style with CSS. It also makes sense to present the calendar as a vertical list of days rather than a grid since screen width is so scarce on mobile devices. So here's what we came up with. ## **Markup** First, we'll wrap the whole thing in a container div. We also need one list to handle the day of the week labels
- Sunday - Monday - Tuesday - Wednesday - Thursday - Friday - Saturday

Now we'll add some weekdays to the mix. Inside each list-item, we'll put some markup for the actual date. You'll notice that the day of the week is repeated inside each list-item. That markup will be hidden on the desktop version. You'll have the days at the top like a normal calendar. When all the days display as a vertical list on mobile, you'll need the day in the cell.

  • Sun,Dec 1

Now we'll need to add some events to the cells. We want the whole area to be clickable, so the container will be an anchor tag. Inside the anchor, we'll add some divs for breaking up the data.

Style

Now that we have all our markup in place, we can start styling. I'm only covering the crucial parts in this tutorial. You can see the full style in the demo.

  1. We'll start with the desktop view. The calendar

    needs to be 100%. This will create a fluid layout that expands to fill whatever container we put this in. We also need to get the - behaving. Change the display to block and float them left. That will cause them to line up left to right. The heights will look wonky if they're not all completely equal. We'll deal with that later wit

    h some javascript. Each cell needs to be 1/7th width. That comes out to 14.2857142857%. We want percentages so that we keep an fluid layout. To keep the padding from adding to the overall width, use the CSS3 property “box-sizing: border-box;”. We'll also need to adjust the margins on the bottom and right. Why? When we add a border to the cell, some of the sides will double up and create the illustion of a thicker border. To combat this, just set a negative margin and the borders will overlap rather than butt up side-by-side.

.calendar ul{ list-style: none; padding: 0; margin: 0; clear: both; width: 100%; } .calendar li{ display: block; float: left; width: 14.2857142857%; padding: 5px; box-sizing: border-box; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; }

Javascript

There's a nifty little jQuery script called equalHeights that simply looks at all of a specified element, and calculates the height based on the tallest one. This is crucial because we want out calendar in desktop view to have uniform cells. Take a look at the script here. You can specify a min and max height as well as other options, but it's basic configuration is all we'll need for this project.

$(".columns").equalHeights(100,300);

*Mobile *

Here's the good stuff. Like I said earlier, a grid based calendar is rather sub-optimal for a mobile device. The screens are much better suited for a list view. Since we're using media queries, we don't have to change the markup at all. It's just a few new CSS rules.

First thing we're going to define our screen size. We decided to make the breakpoint for mobile devices at the 768px mark, basically an iPad in portrait orientation. Landscape orientation still provides enough space to show the grid style

@media only screen and (max-width : 768px) {  /* mobile styles go here */ }

Next we need turn off the week days that run across the top of the calendar. They won't make sense for mobile. We also turn on the days of the week in the individual cells. And the last thing we'll do is hide the “out of range” dates. These are dates that show up from the previous and following months on a traditional calendar to square off the grid properly. These days are just clutter in a list view.

@media only screen and (max-width : 768px) { .calendar .weekdays{ display: none; } .calendar li{ height: auto!important; border: 1px solid #ededed; width: 100%; padding: 10px; margin-bottom: -1px; } .calendar li .day, .calendar li .month{ display: inline; } .calendar li.outofrange { display: none; } }

This gives us a lovely list view on mobile devices. When you load the calendar on your computer or iPad in landscape, you'll get the default grid view. Win-Win!

If you'd like to see this live with all the bells and whistles, visit the Atlanta Ballet's calendar here!

zp8497586rq

About Search Discovery

Search Discovery is a digital intelligence company that empowers organizations to make better, dynamic and transformative business decisions. We're focused on delivering results for our clients through digital analytics, SEO, digital media, and technology.


Comments

Let's Talk.

You're excited. We're excited. Give us a shout so we can get this party started.

!
!
!