%table
%tr
%th Mon
%th Tue
%th Wed
%th Thu
%th Fri
%th Sat
%th Sun
%tr
%td 1
%td 2
%td 3
%td 4
%td 5
%td 6
%td 7
%tr
%td 8
%td 9
%td 10
%td 11
%td 12
%td 13
%td 14
%tr
%td 15
%td 16
%td 17
%td 18
%td 19
%td 20
%td 21
%tr
%td 23
%td 24
%td 25
%td 26
%td 27
%td 28
%td 29
%tr
%td 30
%script{src: "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"}
body
background-color: #eee
padding: 2em 0
table
background-color: #fff
border-collapse: collapse
margin-left: auto
margin-right: auto
width: 500px
th, td
border: 1px solid #ccc
font-family: Helvetica, sans-serif
width: 14.28%
th
font-size: 12px
line-height: 20px
td
cursor: default
line-height: 4
text-align: center
&.hovering
background-color: rgba(254, 171, 41, 0.2)
&.selected
background-color: rgba(254, 171, 41, 0.4)
$(function() {
var clickCount = 0;
// add an index to each cell
$('td').each(function(i) {
$(this).attr('data-num', i);
})
// select cell clicked on
.on('click', function() {
if(clickCount < 2) {
$(this).addClass('selected');
// make selection on second click
if(clickCount == 1) {
$('.hovering').addClass('selected');
}
clickCount++;
}
else {
// cancel previous selection and start again
clickCount = 1;
$('.selected').removeClass('selected');
$('td').removeClass('hovering');
$(this).addClass('selected');
}
});
// hover highlight selection
$('table').delegate('td', 'mouseenter', function() {
if($('.selected').length == 1) {
var selectedIndex = parseInt($('.selected').attr('data-num')),
currentHoverIndex = parseInt($(this).attr('data-num'));
$('td').removeClass('hovering');
// highlight after first selection
if(selectedIndex < currentHoverIndex) {
$('td').slice(selectedIndex+1, currentHoverIndex+1).addClass('hovering');
}
// highlight before first selection
else if(currentHoverIndex < selectedIndex) {
$('td').slice(currentHoverIndex, selectedIndex).addClass('hovering');
}
}
});
});
Also see: Tab Triggers