With the calendars looking much more like calendars, much easier to recognize and read at a glance than before, let’s turn to adding a little more useful visual information to them by highlighting the current week and day. In order to do this, we must first differentiate these within the HTML:
<tr class="thisweek">
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td class="today">27</td>
<td>28</td>
</tr>
These could just as easily be id
s rather than class
es in this case, but it is possible to imagine a case where we would want to highlight different days and weeks on different calendars along a page. My general rule is to use an id
only when I have a particular reason to want only one of something on the page, usually for the sake of prominence. Elsewhere, a class
is generally more appropriate.
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |