Current month calendar. The smallest realization, I suppose.
HTML, 62 lines
Download
Copy to clipboard1 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 | <!DOCTYPE html>
<html lang="en-US">
<head>
<title>Calendar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-family: tahoma; font-size: 80%; }
th { color: #008; }
td { text-align: center; }
#sunday { color: #cc0000; }
#today { background-color: #bebebe; color: #fff; font-weight: bold; }
</style>
<script language="javascript" type="text/javascript">
var dateTime = dateTime || {
getMonthLastDay : function(year, month) {
for (var i = 29; i < 33; i++) {
if (new Date(year, month, i).getMonth() != month) return --i;
}
},
getRawCalendar : function() {
var arr = [], cur, i;
with (new Date()) {
cur = new Date(getFullYear(), getMonth(), 1).getDay();
if (cur != 0) {
for (i = 1; i <= cur; i++) arr.push(' ');
}
for (i = 1; i <= this.getMonthLastDay(getFullYear(), getMonth()); i++) {
arr.push(i);
}
return arr;
}
},
getToday : function() {
return (new Date()).getDate();
}
}
</script>
</head>
<body>
<table>
<tr>
<th id='sunday'>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th>
</tr>
<script language="javascript" type="text/javascript">
var i, j, row, raw = dateTime.getRawCalendar();
for (i = 0; i <= raw.length; i += 7) {
row = raw.slice(i, i + 7);
document.write('<tr>');
for (j = 0; j < row.length; j++) {
row[j] == dateTime.getToday() ? document.write('<td id="today">' +
row[j] + '</td>') : document.write('<td>' + row[j] + '</td>');
}
document.write('</tr>');
}
</script>
</table>
</body>
</html>
|
Tags: calendar, javascript
