[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/), Cre­ative Direc­tor

Build­ing the new site for Atlanta Bal­let pro­vid­ed a lot of fun learn­ing expe­ri­ences and some real­ly cool chal­lenges to tack­le. One issue was the per­for­mance cal­en­dar. Since our focus was on mak­ing the site acces­si­ble on a broad range of devices and screen sizes, it was impor­tant that we cre­at­ed a cal­en­dar that scaled well on mobile devices, but still pre­sent­ed like a tra­di­tion­al cal­en­dar on desk­top screens.

Most cal­en­dar plu­g­ins are devel­oped using tables. It makes sense seman­ti­cal­ly, it’s all tab­u­lar data. But tables are very rigid in how they’re ren­dered. It’s dif­fi­cult to change the shape with just CSS.

Our solu­tion was to cre­ate a cal­en­dar using an unordered list as the struc­ture. If you think about it, a cal­en­dar is just a list of days, so it still makes seman­tic sense. Lists are also much friend­lier to style with CSS. It also makes sense to present the cal­en­dar as a ver­ti­cal 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 con­tain­er div. We also need one list to han­dle the day of the week labels

- Sun­day
— Mon­day
— Tues­day
— Wednes­day
— Thurs­day
— Fri­day
— Sat­ur­day

Now we’ll add some week­days to the mix. Inside each list-item, we’ll put some markup for the actu­al date. You’ll notice that the day of the week is repeat­ed inside each list-item. That markup will be hid­den on the desk­top ver­sion. You’ll have the days at the top like a nor­mal cal­en­dar. When all the days dis­play as a ver­ti­cal 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 click­able, so the con­tain­er will be an anchor tag. Inside the anchor, we’ll add some divs for break­ing up the data.

  • Sun,Dec 1

    Atlanta Ballet’s Nut­crack­er
    7:30 pm
    Fab­u­lous Fox The­atre


Now that we have all our markup in place, we can start styling. I’m only cov­er­ing the cru­cial parts in this tuto­r­i­al. You can see the full style in the demo.

  1. We’ll start with the desk­top view. The cal­en­dar

    needs to be 100%. This will cre­ate a flu­id lay­out that expands to fill what­ev­er con­tain­er we put this in. We also need to get the — behav­ing. Change the dis­play 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 com­plete­ly equal. We’ll deal with that lat­er wit 

    h some javascript. Each cell needs to be 1/7th width. That comes out to 14.2857142857%. We want per­cent­ages so that we keep an flu­id lay­out. To keep the padding from adding to the over­all width, use the CSS3 prop­er­ty “box-siz­ing: bor­der-box;”. We’ll also need to adjust the mar­gins on the bot­tom and right. Why? When we add a bor­der to the cell, some of the sides will dou­ble up and cre­ate the illus­tion of a thick­er bor­der. To com­bat this, just set a neg­a­tive mar­gin and the bor­ders will over­lap rather than butt up side-by-side.

.cal­en­dar ul{ list-style: none; padding: 0; mar­gin: 0; clear: both; width: 100%; } .cal­en­dar li{ dis­play: block; float: left; width: 14.2857142857%; padding: 5px; box-siz­ing: bor­der-box; bor­der: 1px sol­id #ccc; mar­gin-right: -1px; mar­gin-bot­tom: -1px; }


There’s a nifty lit­tle jQuery script called equal­Heights that sim­ply looks at all of a spec­i­fied ele­ment, and cal­cu­lates the height based on the tallest one. This is cru­cial because we want out cal­en­dar in desk­top view to have uni­form cells. Take a look at the script here. You can spec­i­fy a min and max height as well as oth­er options, but it’s basic con­fig­u­ra­tion is all we’ll need for this project.


*Mobile *

Here’s the good stuff. Like I said ear­li­er, a grid based cal­en­dar is rather sub-opti­mal for a mobile device. The screens are much bet­ter suit­ed 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 decid­ed to make the break­point for mobile devices at the 768px mark, basi­cal­ly an iPad in por­trait ori­en­ta­tion. Land­scape ori­en­ta­tion still pro­vides 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 cal­en­dar. They won’t make sense for mobile. We also turn on the days of the week in the indi­vid­ual cells. And the last thing we’ll do is hide the “out of range” dates. These are dates that show up from the pre­vi­ous and fol­low­ing months on a tra­di­tion­al cal­en­dar to square off the grid prop­er­ly. These days are just clut­ter in a list view.

@media only screen and (max-width : 768px) { .cal­en­dar .week­days{ dis­play: none; } .cal­en­dar li{ height: auto!important; bor­der: 1px sol­id #eded­ed; width: 100%; padding: 10px; mar­gin-bot­tom: -1px; } .cal­en­dar li .day, .cal­en­dar li .month{ dis­play: inline; } .cal­en­dar li.outofrange { dis­play: none; } }

This gives us a love­ly list view on mobile devices. When you load the cal­en­dar on your com­put­er or iPad in land­scape, you’ll get the default grid view. Win-Win!

If you’d like to see this live with all the bells and whis­tles, vis­it the Atlanta Ballet’s cal­en­dar here!