Kalendář v CSS

27. dubna 2006

•

Toto řešení ukazuje, jak lze pomocí kaskádových stylů vytvořit vizuálně působivý kalendář. V příkladu jsou uvedeny dva kalendáře – jeden kalendář je vytvořen pomocí tabulek a druhý bez jejich použití.

Zde si můžete prohlédnout výsledek – kalendář s tabulkou.

Zde si můžete prohlédnout výsledek – kalendář bez tabulek.

Toto řešení publikovala Veerle Pieters. Bližší popis najdete v článku A CSS styled calendar.

Toto řešení publikoval Eric A. Meyer. Bližší popis najdete v článku Tableless Calendar.

CSS, kalendář s tabulkou

#calendar
{
width: 160px;
padding: 0;
margin: 0;
border-left: 1px solid #8da1bc;
font: normal 12px/20px „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
color: #545e69;
text-align: center;
background-color: #fff;
}
.nav, .nav a
{
font: bold 18px „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
}
caption
{
margin: 0;
padding: 0;
width: 160px;
background: #8da1bc;
color: #fff;
font: bold 14px „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th
{
font: bold 11px/20px „Trebuchet MS“, Verdana, Arial, Helvetica, sans-serif;
color: #545e69;
background: #d7dddc;
border-right: 1px solid #8da1bc;
border-bottom: 1px solid #8da1bc;
border-top: 1px solid #8da1bc;
}
.today, td.today a, td.today a:link, td.today a:visited
{
color: #5f3e00;
font-weight: bold;
background: #fff7cf;
}
td
{
border-right: 1px solid #8da1bc;
border-bottom: 1px solid #8da1bc;
width: 20px;
height: 20px;
text-align: center;
background: #f0f0f0;
}
td a
{
text-decoration: none;
font-weight: bold;
display: block;
}
td a:link, td a:visited
{
color: #617e8e;
background: #e8f2ff;
}
td a:hover, td a:active
{
color: #6a939b;
background: #e7d271;
}

CSS, kalendář bez tabulek

h3
{
text-align: center;
}
#kalendar
{
padding-top: 0.5em;
width: 230px;
}
#kalendar span
{
float: left;
width: 27px;
padding: 0;
margin: 0.05em;
text-align: center;
border: 1px solid silver;
background: #e8f2ff;
}
.nav, #kalendar span a
{
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000;
}
#kalendar, .pon
{
clear: left;
}
#kalendar .vikend
{
background: #b5d1ff;
}
#kalendar .nadpisdnu
{
background: #d6d7d7;
font-weight: bold;
}
#kalendar .prazdny
{
background: #f0f0f0;
}
#kalendar span a, #kalendar span a:visited
{
display: block;
width: 27px;
}
#kalendar #dnes a, #kalendar #dnes a:visited
{
color: #5f3e00;
background: #fff7cf;
}
#kalendar span a:hover
{
color: #fff;
background: #e7d271;
}

XHTML, kalendář s tabulkou

<html>
<body>
<table id=“calendar“ cellspacing=“0″ cellpadding=“0″>
<caption><a href=“#“ title=“předchozí měsíc“ class=“nav“>«</a> Březen <a href=“#“ title=“příští měsíc“ class=“nav“>»</a></caption>
<tr>
<th scope=“col“ abbr=“Pondělí“ title=“Pondělí“>Po</th>
<th scope=“col“ abbr=“Úterý“ title=“Úterý“>Út</th>
<th scope=“col“ abbr=“Středa“ title=“Středa“>St</th>
<th scope=“col“ abbr=“Čtvrtek“ title=“Čtvrtek“>Čt</th>
<th scope=“col“ abbr=“Pátek“ title=“Pátek“>Pá</th>
<th scope=“col“ abbr=“Sobota“ title=“Sobota“>So</th>
<th scope=“col“ abbr=“Neděle“ title=“Neděle“>Ne</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td><a href=“#“>1</a></td>
<td><a href=“#“>2</a></td>
<td><a href=“#“>3</a></td>
<td><a href=“#“>4</a></td>
<td><a href=“#“>5</a></td>
</tr>
<tr>
<td><a href=“#“>6</a></td>
<td><a href=“#“>7</a></td>
<td><a href=“#“>8</a></td>
<td><a href=“#“>9</a></td>
<td><a href=“#“>10</a></td>
<td><a href=“#“>11</a></td>
<td><a href=“#“>12</a></td>
</tr>
<tr>
<td><a href=“#“>13</a></td>
<td class=“today“><a href=“#“>14</a></td>
<td><a href=“#“>15</a></td>
<td><a href=“#“>16</a></td>
<td><a href=“#“>17</a></td>
<td><a href=“#“>18</a></td>
<td><a href=“#“>19</a></td>
</tr>
<tr>
<td><a href=“#“>20</a></td>
<td><a href=“#“>21</a></td>
<td><a href=“#“>22</a></td>
<td><a href=“#“>12</a></td>
<td><a href=“#“>24</a></td>
<td><a href=“#“>25</a></td>
<td><a href=“#“>26</a></td>
</tr>
<tr>
<td><a href=“#“>27</a></td>
<td><a href=“#“>28</a></td>
<td><a href=“#“>29</a></td>
<td><a href=“#“>30</a></td>
<td><a href=“#“>31</a></td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

XHTML, kalendář bez tabulek

<html>
<body>
<div id=“kalendar“>
<h3><a href=“#“ title=“předchozí měsíc“ class=“nav“>«</a> Březen <a href=“#“ title=“příští měsíc“ class=“nav“>»</a></h3>
Po
Út
St
Čt
Pá
So
Ne
 
 
<a href=“file:///C:/Documents%20and%20Settings/Kuba/Plocha/css/94/priklad-94-1.htm“>1</a>
<a href=“#“>2</a>
<a href=“#“>3</a>
<a href=“#“>4</a>
<a href=“#“>5</a>
<a href=“#“>6</a>
<a href=“#“>7</a>
<a href=“#“>8</a>
<a href=“#“>9</a>
<a href=“#“>10</a>
<a href=“#“>11</a>
<a href=“#“>12</a>
<a href=“#“>13</a>
<a href=“#“>14</a>
<a href=“#“>15</a>
<a href=“#“>16</a>
<a href=“#“>17</a>
<a href=“#“>18</a>
<a href=“#“>19</a>
<a href=“#“>19</a>
<a href=“#“>20</a>
<a href=“#“>21</a>
<a href=“#“>22</a>
<a href=“#“>23</a>
<a href=“#“>24</a>
<a href=“#“>25</a>
<a href=“#“>26</a>
<a href=“#“>27</a>
<a href=“#“>28</a>
<a href=“#“>29</a>
<a href=“#“>30</a>
 
 
</div>
</body>
</html>