teddyzetterlund (owner)

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 #
raw 
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>