HTML CSS calendar

Calendar With Table Approach – CSS

“Calendar With Table Approach – CSS” is a simple example of how to create HTML, CSS calendar.

DEMO Link: http://parhammajd.co.uk/examples/css/calendarWithTable.html

Note the links do not work in the demo. The demo just represent the layout and design of a table based calendar.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
font-size: 62.5%;
}
table {
width: 100%;
border-collapse: collapse;
}
td a:link, td a:visited {
text-decoration: none;
font-family: "Gill Sans", Calibri, Trebuchet, sans-serif;
}

#year {
font-family: Consolas, "Lucida Console", Monaco, monospace;
font-size: 3em;
padding: 0;
margin: 0;
}
#month {
font-family: Consolas, "Lucida Console", Monaco, monospace;
font-size: 2em;
padding: 0;
margin: 0;
}
#days {
background: black url(title-glass.png) repeat-x 50%;
color: white;
font-family: "Gill Sans", Calibri, Trebuchet, sans-serif;
width: 75px;
text-shadow: 0px −1px 0px rgba(0, 0, 0, .8);
border: 1px solid rgba(0,0,0,.5);
border-top: none;
}
#days th {
padding: 4px;
}

.date {
border-right: 1px solid black;
border-bottom: 1px solid black;
font-family: Consolas, "Lucida Console", Monaco, monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: white;
text-align: center;
}
.addevent {
display: block;
float: left;
width: 1em;
height: 1em;
text-align: center;
background-color: #666;
color: white;
font-weight: bold;
text-decoration: none;
}

.event {
clear: both;
padding-left: 1em;
padding-bottom: .75em;
display: block;
}

td {
width: 14%;
background-color: #ccc;
border: 1px solid white;
vertical-align: top;
font-size: 1.2em;
padding: 1px;
background: url(content-bkgd.png) repeat-x;
border: 1px solid rgba(0,0,0,.5);
border-top: none;
}

.weekend {
background-color: #999;
}

.emptydate {
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-family: monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: #ccc;
text-align: center;
}

#today {
border: 2px solid black;
}
</style>
</head>

<body>
<table cellspacing="0">
<tr>
<th colspan="7" id="year">
<a href="year.html?previous">&lt;</a> 2012 <a
href="year.html?next">&gt;</a>
</th>
</tr>
<tr>
<th colspan="7" id="month">
<a href="month.html?previous">&lt;</a> October <a
href="month.html?next">&gt;</a>
</th>
</tr>
<tr id="days">
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday </th>
<th>Saturday</th>
</tr>

<tr>
<td class="weekend">
<div>
<a href="1.html" class="date">1</a>
<a href="add.html" class="addevent">+</a>
</div>
</td>

<td>
<div>
<a href="2.html" class="date">2</a>
<a href="add.html" class="addevent">+</a>
</div>
<a href="16.html?id=1" class="event">Regular City
Commission meeting agenda</a>
</td>

<td>
<div>
<a href="3.html" class="date">3</a>
<a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="4.html" class="date">4</a>
<a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="5.html" class="date">5</a>
<a href="add.html" class="addevent">+</a>
</div>
<a href="5.html?id=1" class="event">Dad's birthday</a>
</td>
<td>
<div>
<a href="6.html" class="date">6</a>
<a href="add.html" class="addevent">+</a>
</div>
</td>
<td class="weekend">
<div>
<a href="7.html" class="date">7</a>
<a href="add.html" class="addevent">+</a>
</div>
<a href="7.html?id=1" class="event">FSU at UM</a>
</td>
</tr>

<tr>
<td class="weekend">
<div>
<a href="29.html" class="date">29</a>
<a href="add.html" class="addevent">+</a>
</div>
<div class="event">Buy candy</div>
</td>
<td>
<div>
<a href="30.html" class="date">30</a>
<a href="add.html" class="addevent">+</a>
</div>
<a href="16.html?id=1" class="event">Regular City
Commission meeting agenda</a>
</td>
<td>
<div>
<a href="31.html" class="date">31</a>
<a href="add.html" class="addevent">+</a>
</div>
<a href="31.html?id=1" class="event">Halloween</a>
<a href="31.html?id=2" class="event">Flu shot</a>
</td>
<td>
<div class="emptydate">&nbsp;</div>
</td>
<td>
<div class="emptydate">&nbsp;</div>
</td>
<td>
<div class="emptydate">&nbsp;</div>
</td>
<td class="weekend">
<div class="emptydate">&nbsp;</div>
</td>
</tr>
</table>

</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *