(^48) ❘ CHAPTER 2 SELECTING AND FILTERING
}
table.calendarMonth {
table-layout: fixed;
width: 100%;
height: 100%;
border-collapse: collapse;
empty-cells: show;
}
table.calendarMonth tbody {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
table.calendarMonth th {
font-weight: 200 ;
border: 1px solid rgb(224, 224, 224);
padding: 10px;
}
tr.calendarHeading th {
font: 24px Helvetica, Arial, sans-serif;
}
table.calendarMonth td {
border: 1px solid rgb(224, 224, 224);
vertical-align: top;
padding: 10px;
}
td.calendarLastMonth,
td.calendarNextMonth {
color: rgb(204, 204, 204);
background: rgb(244, 244, 244);
}
td.calendarDaySelected {
background: yellow;
}
tr.calendarWeekSelected {
background: lightyellow;
}
td.calendarToday {
background: gold;
}Finally, you apply the following JavaScript, which provides you with an introduction to some of
jQuery’s various methods that allow you to traverse the DOM, as well as change and manipulate
selections.$(document).ready(
function()
{
var today = $('td.calendarToday');var setUpThisWeek = function()
{
$('table.calendarMonth td').removeClass(
'calendarYesterday ' +
'calendarTomorrow ' +