calendario-css

En esta entrada aprenderemos a estilizar un calendario con CSS. Este calendario está estructurado mediante una tabla con filas y columnas (siendo estas los días y meses). Este calendario no es dinámico como el que indicamos en otra entrada, pero servirá por si alguna vez deseamos estilizar un calendario.

Estructura HTML

La estructura HTML sería así:

<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">

<caption><a href="#" title="previous month" class="nav">&amp;laquo;</a> Marzo <a href="#" title=siguiente mes" class="nav">&amp;raquo;</a></caption>

<tr>

<th scope="col" abbr="Sunday" title="Sunday">S</th>

<th scope="col" abbr="Monday" title="Monday">M</th>

<th scope="col" abbr="Tuesday" title="Tuesday">T</th>

<th scope="col" abbr="Wednesday" title="Wednesday">W</th>

<th scope="col" abbr="Thursday" title="Thursday">T</th>

<th scope="col" abbr="Friday" title="Friday">F</th>

<th scope="col" abbr="Saturday" title="Saturday">S</th>

</tr>

<tr>

<td>&amp;nbsp;</td>

<td>&amp;nbsp;</td>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td class="today"><a href="#">6</a></td>

<td>7</td>

<td>8</td>

<td>9</td>

<td><a href="#">10</a></td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td><a href="#">13</a></td>

<td>14</td>

<td>15</td>

<td>16</td>

<td>17</td>

<td>18</td>

<td>19</td>

</tr>

<tr>

<td>20</td>

<td>21</td>

<td>22</td>

<td><a href="#">23</a></td>

<td>24</td>

<td>25</td>

<td>26</td>

</tr>

<tr>

<td>27</td>

<td>28</td>

<td>29</td>

<td>30</td>

<td>31</td>

<td>&amp;nbsp;</td>

<td>&amp;nbsp;</td>

</tr>

</table>

Como vemos, los días se agrupan mediante celdas, en la etiqueta

. Si un día tiene un enlace (para mostrar, por ejemplo, un evento mediante una dirección web), se le dará otro estilo, como veremos después en el código CSS.

Código CSS

Para el estilizar lo que es el calendario en conjunto usaremos este código CSS:

#calendar {  width: 141px;  padding: 0;  margin: 0;  border-left: 1px solid #A2ADBC;  font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;  color: #616B76;  text-align: center;  background-color: #fff; }

Definiremos el estilo de la celda aplicando este código CSS:

td a:link, td a:visited {  color: #608194;  background: url(images/bg_calendar.gif) no-repeat; }  td a:hover, td a:active {  color: #6aa3ae;  background: url(images/bg_calendar.gif) no-repeat right top; }

Hay que aclarar que la única imagen usada en el calendario (bg_calendar.gif) está compuesta de 3 diferentes imágenes de fondo, usando el posicionamiento de fondo (css sprites).

El código CSS al completo sería este:

#calendar {
width: 141px;
padding: 0;
margin: 0;
border-left: 1px solid #A2ADBC;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
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: 141px;
background: #A2ADBC;
color: #fff;
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
th {
font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
background: #D9E2E1;
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
border-top: 1px solid #A2ADBC;
}
.today, td.today a, td.today a:link, td.today a:visited {
color: #F6F4DA;
font-weight: bold;
background: #DF9496;
}
td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 20px;
height: 20px;
text-align: center;
background: url(images/bg_calendar.gif) no-repeat right bottom;
}
td a {
text-decoration: none;
font-weight: bold;
display: block;
}
td a:link, td a:visited {
color: #608194;
background: url(images/bg_calendar.gif) no-repeat;
}
td a:hover, td a:active {
color: #6aa3ae;
background: url(images/bg_calendar.gif) no-repeat right top;
}
#calendar {

width: 141px;

padding: 0;

margin: 0;

border-left: 1px solid #A2ADBC;

font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #616B76;

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: 141px;

background: #A2ADBC;

color: #fff;

font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align: center;

}

th {

font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #616B76;

background: #D9E2E1;

border-right: 1px solid #A2ADBC;

border-bottom: 1px solid #A2ADBC;

border-top: 1px solid #A2ADBC;

}

.today, td.today a, td.today a:link, td.today a:visited {

color: #F6F4DA;

font-weight: bold;

background: #DF9496;

}

td {

border-right: 1px solid #A2ADBC;

border-bottom: 1px solid #A2ADBC;

width: 20px;

height: 20px;

text-align: center;

background: url(images/bg_calendar.gif) no-repeat right bottom;

}

td a {

text-decoration: none;

font-weight: bold;

display: block;

}

td a:link, td a:visited {

color: #608194;

background: url(images/bg_calendar.gif) no-repeat;

}

td a:hover, td a:active {

color: #6aa3ae;

background: url(images/bg_calendar.gif) no-repeat right top;

}

Estandarización

CSS 2.1 válido.

XHTML 1.0 Strict válido.

Ejemplo de su funcionamiento

Ver ejemplo del calendario estilizado con CSS

Vía | Duoh