# Calendario. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Calendario

Formularios

Campo que permite desplegar un calendario para seleccionar una fecha o rango de fechas. Basado en la librería [Cally](https://wicky.nillia.ms/cally/ "Se abre en ventana nueva")

## Índice de apartados de esta página

-   [Anatomía](#anatoma)
-   [Variantes de calendario](#variantes-de-calendario)
-   [Accesibilidad](#accesibilidad)

## Anatomía [#](#anatoma)

![Elementos que forman el componente calendario.](images/c-datepicker-anatomia.svg)

1.  [**Entrada de texto**](componente-input-text.html): Permite escribir la fecha en lugar de seleccionarla y posee las mismas variantes y elementos que un campo de texto. La fecha debe estar en el mismo formato que se indica.
2.  [**Botón desplegable**](componente-dropdown.html): Se encuentra dentro del campo y despliega un contenedor con el calendario que permite seleccionar la fecha. En su lugar también puedes utilizar una variante con etiqueta de texto al lado del campo.
3.  [**Calendario**](componente-datepicker-codigo.html): Selector visual que permite elegir uno, varios días o un rango de fechas concreto. Basado en la librería [Cally](https://wicky.nillia.ms/cally/ "Se abre en ventana nueva")
4.  [**Botones**](componente-botones): Cuando se acepta la fecha seleccionada, se escribe automáticamente en la entrada de texto con el formato adecuado. Cancelar o pulsar fuera cierra el desplegable sin guardar la fecha.

## Variantes de calendario [#](#variantes-de-calendario)

Deberás configurarlo a partir de la [documentación de Cally](https://wicky.nillia.ms/cally/ "Se abre en ventana nueva")

### Fecha única o múltiple [#](#fecha-nica-o-mltiple)

Podrás seleccionar uno o varios días.

### Rango de fechas [#](#rango-de-fechas)

Pulsa primero el día de incio y después el de fin para seleccionar un rango de fechas.

### Selector de año [#](#selector-de-ao)

Si necesitas navegar a otro año disinto puedes utilizar un selector que te permita elegirlo.

Selecciona año 2024 2025 2026

### Múltiples meses [#](#mltiples-meses)

A veces necesitas seleccionar varios días o un rango de fechas que abarca varios meses. En esta variante se pueden visualizar dos meses consecutivos.

Selecciona año 2024 2025 2026

### Formato desplegable [#](#formato-desplegable)

Es el caso de uso más habitual: un desplegable dentro de un campo en el contexto de un formulario. Hereda las mismas variantes que el resto de inputs.

Elige fecha de inicio

Usa el formato: AAAA-MM-DD (año-mes-día)año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos.

Seleccionar fecha con una tabla de calendario

-   Aceptar
-   Cancelar

## Accesibilidad [#](#accesibilidad)

### Cómo funciona [#](#cmo-funciona)

-   Elemento `<input>` con la misma lógica que conlleva el componente [entrada de texto](componente-input-text.html). Es necesario extender la descripción del formato de fecha para lectores de pantalla con un `.sr-only`. A su derecha se encuentra un elemento `<button>` con la misma lógica que conlleva el componente [desplegable](componente-dropdown.html) y un `aria-haspopup=modal`. Cuando el botón solo tiene un icono, dispone de una etiqueta con `.sr-only` que anuncia "Seleccionar fecha".
-   El contenedor desplegable tiene por defecto una lista `<ul>` con dos `<button>` que permiten aceptar o cancelar la selección, además de un caller que llama al calendario.
    -   Este componente se encaja en un contenedor con `role=group`, un `aria-labelledby` que apunta a un texto con el mes y año actuales.
    -   La cabecera tiene un `aria-live=polite` y un `aria-atomic=true` que indica que este contenido es autónomo y permite ser actualizado sin afectar a los anteriores.
    -   Los botones de mes anterior y siguiente siguen la lógica del componente [botón](componente-botones.html) y tienen etiquetas que describen la acción para lectores de pantalla.
    -   El texto de año tiene un `aria-hidden=true` para evitar información redundante y puede ser sustituido por un [selector](componente-selector.html) para elegir año.
    -   El listado de días se encuentra dentro de un elemento `<table>` y las iniciales de los días de la semana en una fila de cabecera `<thead>`, junto con una etiqueta que anuncia el nombre completo para lectores de pantalla.
        -   Cada uno de los días es un `<button>`, con un `aria-pressed` que indica si está seleccionado y un `aria-label` que describe el mes al que corresponde el día.
-   Cuando una persona navegue con teclado puede tabular entre las flechas de navegación de meses y moverse entre la tabla de días con las flechas del teclado. La selección de días se realiza con la tecla enter o el espacio. También es posible avanzar o retroceder de mes desde la tabla de días saliendo por los bordes superior e inferior.

Más información en la documentación de [Cally](https://wicky.nillia.ms/cally/ "Se abre en ventana nueva") y en el apartado [accesibilidad de formularios](componente-formularios.html#accesibilidad).

Qué tener en cuenta

Qué usar

Dónde

Función

`id`

Parámetro Nunjucks dentro del componente

Permite las llamadas entre `<label>`, hint, error y el `<input>`.

`role=img` y `aria-label`

SVG de los botones de avanzar y retroceder mes de cabecera

Describen la acción para lectores de pantalla.