Revisions

gist: 98530 Download_button fork
public
Description:
Marks the current day with a red circle. Browsers which doesn't yet support border-radius gets the a square instead.
Public Clone URL: git://gist.github.com/98530.git
Embed All Files: show embed
highlight_current_day_in_calendar.html #
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mark current day in calendar</title>
<style type="text/css" media="screen">
td {
font: 75%/1.2 "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
text-align: center;
}
 
.mark {
background: red;
height: 24px;
width: 24px;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
}
.mark div {
background: white;
height: 16px;
left: 3px;
*left: 0;/* fix for IE6-7 */
padding-top: 2px;
position: relative;
top: 3px;
width: 18px;
border-radius: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
}
</style>
</head>
<body>
<table class="calendar" cellspacing="10">
<caption>July, 2009</caption>
<tbody>
<tr>
<th class="header">Su</th>
<th class="header">Mo</th>
<th class="header">Tu</th>
<th class="header">We</th>
<th class="header">Th</th>
<th class="header">Fr</th>
<th class="header">Sa</th>
</tr>
<tr>
<td colspan="3"> </td>
<td rel="2009-07-01" class="day">1</td>
<td rel="2009-07-02" class="day">2</td>
<td rel="2009-07-03" class="day">3</td>
<td rel="2009-07-04" class="day">4</td>
</tr>
<tr>
<td rel="2009-07-05" class="day">5</td>
<td rel="2009-07-06" class="day">6</td>
<td rel="2009-07-07" class="day">7</td>
<td rel="2009-07-08" class="day">8</td>
<td rel="2009-07-09" class="day">9</td>
<td rel="2009-07-10" class="day">10</td>
<td rel="2009-07-11" class="day">11</td>
</tr><tr><td rel="2009-07-12" class="day">12</td>
<td rel="2009-07-13" class="day">13</td>
<td rel="2009-07-14" class="day">14</td>
<td rel="2009-07-15" class="day">15</td>
<td rel="2009-07-16" class="day">16</td>
<td rel="2009-07-17" class="day">17</td>
<td rel="2009-07-18" class="day">18</td>
</tr>
<tr>
<td rel="2009-07-19" class="day">
<div class="mark"><div>19</div></div>
</td>
<td rel="2009-07-20" class="day">20</td>
<td rel="2009-07-21" class="day">21</td>
<td rel="2009-07-22" class="day">22</td>
<td rel="2009-07-23" class="day">23</td>
<td rel="2009-07-24" class="day">24</td>
<td rel="2009-07-25" class="day">25</td>
</tr>
<tr>
<td rel="2009-07-26" class="day">26</td>
<td rel="2009-07-27" class="day">27</td>
<td rel="2009-07-28" class="day">28</td>
<td rel="2009-07-29" class="day">29</td>
<td rel="2009-07-30" class="day">30</td>
<td rel="2009-07-31" class="day">31</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
</body>
</html>