CSS: calendari con le liste

I calendari formattati con i CSS vengono solitamente realizzati con le tabelle, ed in effetti questo è il modo più semantico di procedere. In realtà tali calendari possono essere realizzati anche con le liste, per esempio con le liste non ordinate. Nell'esempio che segue vedremo un calendario realizzato con un'unica lista non ordinata. Il calendario avrà anche un'utile funzionalità: quando si passa con il mouse su un giorno segnato con un colore diverso, l'evento collegato a quel giorno comparirà sulla parte superiore del calendario,

Il nostro calendario è composto dal nome dei giorni, dai giorni stessi e dagli eventi legati ad alcuni giorni particolari. La marcatura è la seguente:


<ul id="calendar">

<li class="day">Lun</li>
<li class="day">Mar</li>
<li class="day">Mer</li>
<li class="day">Gio</li>
<li class="day">Ven</li>
<li class="day">Sab</li>
<li class="day">Dom</li>

<li class="event"><a href="#">1
<span class="todo">Evento 1</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="event"><a href="#">4
<span class="todo">Evento 2</span></a></li>
<li class="event"><a href="#">5
<span class="todo">Evento 3</span></a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>

<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li class="event"><a href="#">11
<span class="todo">Evento 4</span></a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>

<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<li class="event"><a href="#">21
<span class="todo">Evento 5</span></a></li>

<li><a href="#">22</a></li>
<li><a href="#">23</a></li>
<li><a href="#">24</a></li>
<li><a href="#">25</a></li>
<li><a href="#">26</a></li>
<li><a href="#">27</a></li>
<li class="event"><a href="#">28
<span class="todo">Evento 6</span></a></li>

<li><a href="#">29</a></li>
<li><a href="#">30</a></li>
<li><a href="#">31</a></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>

Useremo i float per allineare i blocchi dei giorni, sfruttando il fatto che quando un float non ha più spazio sulla stessa riga perchè lo spazio disponibile è esaurito, allora viene spinto automaticamente sulla riga successiva:


#calendar {
    width: 28em;
    margin: 2em auto;
    padding: 0;
    list-style: none;
    height: 100%;
    overflow: hidden;
    font: 100% Arial, sans-serif;
    position: relative;
}

#calendar li {
    width: 4em;
    height: 4em;
    float: left;
    display: block;
    margin: 0;
}

#calendar li.day {
	background: #333;
	text-align: center;
	line-height: 4;
	font-weight: bold;
	font-variant: small-caps;
	color: #fff;
}

#calendar li a {
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    line-height: 4;
    color: #000;
    text-align: center;
    text-decoration: none;
    margin: 0;
}

#calendar li a span {
	display: block;
	background: #d34545;
	width: 100%;
	text-align: center;
	cursor: help;
	position: absolute;
	top: -1000em;
	color: #fff;
	font-weight: bold;
}

#calendar li a:hover span {
	top: 0;
	left: 0;
}

#calendar li.empty {background: #fff;}
#calendar li.event {background: #ccc;}

Ogni blocco è largo ed alto 4em. Il calendario è largo 28em, quindi ciascuna riga può contenere al massimo sette blocchi (una settimana). Il contenitore principale ha la dichiarazione position: relative, in modo tale che gli eventi (contrassegnati con la classe todo) si posizioneranno esattamente sulla parte superiore del calendario quando l'utente passa col mouse sui link che li contengono. Notate anche come tali eventi siano stati in precedenza nascosti usando un valore negativo della proprietà top.

Potete visionare l'esempio finale in questa pagina.

Torna su