The online home of Daniel Winer

Responsive calendar Feb 09, 2013

Just a simple calendar I made, more than anything as a proof of concept that it can be easily done without using a table.

One thing to note though is that this uses some CSS3 that won't work in older browsers, in particular:

  
.cal_row > div:first-child,
.cal_row > div:nth-child(7n+8) {
  border-left: 1px solid #e6e6e6;
}
  

This gives a left border to the first day of each row (all the other days have a right border only so as not to end up with a thick, double border). If you need it to look perfect in old browsers then this is an easy fix with a bit of javascript.

The idea behind this calendar was that the user would click on the day to add a new event and click on the link inside the day to edit existing events, this would happen in a modal window. I'll update it in another post with some of the styles for those actions.