Estructura y estilos para un calendario básico y un calendario fluido sin comportamientos asociados. Permite mostrar una vista estática, asociarlo a una función JavaScript o incorporarlo a un dropdown.
Calendario para diferentes aplicaciones.
El calendario debe englobarse en un contenedor con la clase .calendar, y para definir la anchura correcta se debe poner dentro de un contenedor con clase .card, ya que la clase .calendar coge todo el ancho de su contenedor.
El tr de encabezado de mes se identifica con la clase .calendar__month y el de las semanas con la clase .calendar__day. Los td de días inactivos se pueden identificar con la clase .calendar__day--inactive.
.table-responsive, como se indica en la documentación sobre tablas.
.visually-hidden que se aplica a la clase calendar__week, si se desea que sean visibles se ha de eliminar dicha clase.
<div class="card">
<div class="card__contents">
<table class="calendar">
<thead>
<tr class="calendar__month" role="presentation">
<td class="calendar__prev" role="presentation">
<a href="#" title="Mes anterior" aria-label="Anterior">
<span aria-hidden="true" class="icon icon--arrow-left"></span>
</a>
</td>
<td colspan="5" role="presentation">Noviembre
<span class="calendar__year">2016</span>
</td>
<td class="calendar__next" role="presentation">
<a href="#" title="Mes siguiente" aria-label="Siguiente">
<span aria-hidden="true" class="icon icon--arrow-right"></span>
</a>
</td>
</tr>
<tr class="calendar__week visually-hidden">
<th><abbr title="Lunes">Lu</abbr></th>
<th><abbr title="Martes">Ma</abbr></th>
<th><abbr title="Miercoles">Mi</abbr></th>
<th><abbr title="Jueves">Ju</abbr></th>
<th><abbr title="Viernes">Vi</abbr></th>
<th><abbr title="Sabado">Sa</abbr></th>
<th><abbr title="Domingo">Do</abbr></th>
</tr>
</thead>
<tbody>
<tr class="calendar__day">
<td class="calendar__day--inactive">31 <span class="visually-hidden">Octubre</span></td>
<td><a href="#" title="1 noviembre">1</a></td>
<td><a href="#" title="2 noviembre">2</a></td>
<td><a href="#" title="3 noviembre">3</a></td>
<td><a href="#" title="4 noviembre">4</a></td>
<td><a href="#" title="5 noviembre">5</a></td>
<td><a href="#" title="6 noviembre">6</a></td>
</tr>
<tr class="calendar__day">
<td><a href="#" title="7 noviembre">7</a></td>
<td><a href="#" title="8 noviembre">8</a></td>
<td class="is-active"><a href="#" title="9 noviembre">9</a></td>
<td><a href="#" title="10 noviembre">10</a></td>
<td><a href="#" title="11 noviembre">11</a></td>
<td><a href="#" title="12 noviembre">12</a></td>
<td><a href="#" title="13 noviembre">13</a></td>
</tr>
<tr class="calendar__day">
<td><a href="#" title="14 noviembre">14</a></td>
<td><a href="#" title="15 noviembre">15</a></td>
<td><a href="#" title="16 noviembre">16</a></td>
<td><a href="#" title="17 noviembre">17</a></td>
<td><a href="#" title="18 noviembre">18</a></td>
<td><a href="#" title="19 noviembre">19</a></td>
<td><a href="#" title="20 noviembre">20</a></td>
</tr>
<tr class="calendar__day">
<td><a href="#" title="21 noviembre">21</a></td>
<td><a href="#" title="22 noviembre">22</a></td>
<td><a href="#" title="23 noviembre">23</a></td>
<td><a href="#" title="24 noviembre">24</a></td>
<td><a href="#" title="25 noviembre">25</a></td>
<td><a href="#" title="26 noviembre">26</a></td>
<td><a href="#" title="27 noviembre">27</a></td>
</tr>
<tr class="calendar__day">
<td><a href="#" title="28 noviembre">28</a></td>
<td><a href="#" title="29 noviembre">29</a></td>
<td><a href="#" title="30 noviembre">30</a></td>
<td><a href="#" title="31 noviembre">31</a></td>
<td class="calendar__day--inactive">1 <span class="visually-hidden">Diciembre</span></td>
<td class="calendar__day--inactive">2 <span class="visually-hidden">Diciembre</span></td>
<td class="calendar__day--inactive">3 <span class="visually-hidden">Diciembre</span></td>
</tr>
</tbody>
</table>
</div>
</div>