Responsive calendar - responsive-design

Question

I'm using
<table>
<tbody><tr class="header">
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr class="header">
<td> </td>
<td> </td>
<td> </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="info">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td colspan="3" class="event">Event details</td>
</tr>....
to
....</table>
From a hard-coded calendar. On a mobile device, 7 columns doesn't really work very well. I would prefer a day a line format.
What's the easiest or most elegant way to achieve this? I can recode, using search and replace, the original table so I have a 7 column grid of divs but this may be a bit 'slippery'. (replace the </tr> with <br/>? )

Answer 1

Please check out this solution.
HTML:
<div class="calendar">
<ul class="weekdays">
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<ul class="days">
<!-- add filler at beginning of month -->
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 1</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 2</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 3</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 4</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 5</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 6</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 7</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 8</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 9</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 10</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 11</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 12</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 13</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 14</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 15</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 16</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 17</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 18</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 19</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 20</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 21</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 22</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 23</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 24</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Wed,</span> <span class="month">Mar</span> 25</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Thu,</span> <span class="month">Mar</span> 26</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Fri,</span> <span class="month">Mar</span> 27</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sat,</span> <span class="month">Mar</span> 28</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Sun,</span> <span class="month">Mar</span> 29</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Mon,</span> <span class="month">Mar</span> 30</div>
<div class="show-info"></div>
</li>
<li class="calendar-day">
<div class="date day_cell"><span class="day">Tue,</span> <span class="month">Mar</span> 31</div>
<div class="show-info"></div>
</li>
<!-- add filler at end of month -->
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
<li class="out_of_range calendar-day">
<div class="date day_cell"></div>
</li>
</ul>
<ul class="footer-weekdays">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p>More info at http://www.bluekeyinteractive.com/how-to-create-a-responsive-calendar/
SCSS:
#import "compass/css3";
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#mixin breakpoint($point) {
#if $point == medium {
#media (min-width: 1000px) { #content; }
}
#else if $point == small {
#media (min-width: 628px) { #content; }
}
}
div.calendar{
width:100%;
padding:20px 0;
overflow:hidden;
clear:both;
.weekdays,
.footer-weekdays{
display: none;
}
ul {
margin: 0;
padding:0;
list-style-image: none;
}
li{
height: auto;
width: 100%;
padding: 10px;
max-height: 80px;
border:2px solid #fff;
background-color:#c3eaf6;
.day,
.month{
display: inline;
}
.day {
display: inline;
#include breakpoint(small) {
display: none;
}
}
&.out_of_range {
display: none;
}
}
#include breakpoint(small) {
.weekdays,
.footer-weekdays{
display: block;
li {
background-color:#21b0dc;
height: 40px;
text-align: center;
color:#fff;
}
}
.footer-weekdays li{height:20px;}
ul{
list-style: none;
padding: 0;
margin: 0;
clear: both;
width: 100%;
li{
display: block;
float: left;
height: auto;
max-height: 150px;
width: 14.2857142857%;
padding: 10px;
&.out_of_range {
display: block;
}
}
}
}
}
JS:
/**
Equal Heights Plugin
Equalize the heights of elements. Great for columns or any elements
that need to be the same size (floats, etc).
Version 1.01
Updated 1/30/2014
Copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
than 300 pixels tall. Elements with too much content will gain a scrollbar.
**/
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow","auto");
});
}
})(jQuery);
$(".days li").equalHeights(100,150);