Date Picker - Calendar

El componente Calendar permite a las personas seleccionar una fecha o un rango de fechas de manera rápida y visual. En Energy lo diseñamos para ser claro, accesible y coherente con el resto de la interfaz, ayudando a que la experiencia sea fluida y sin fricciones. Su objetivo es facilitar la interacción, evitando que el usuario tenga que escribir manualmente una fecha y reduciendo errores.

El componente cuenta con distintas variantes que representan los diferentes estados en los que puede encontrarse:

Default

El calendario default se utiliza principalmente para visualizar fechas con eventos asociados, sin marcar rangis de fecha. Esta variante puede tener dos configuraciones:

• Inline: Está integrado de manera fija en la interfaz, visible en una sección específica de la página o aplicación sin necesidad de hacer clic para desplegarlo.‍
• Floating: Este tipo de calendario aparece temporalmente, generalmente cuando el usuario hace clic en un campo de fecha, y se despliega sobre el contenido de la página.

Ranged

El calendario permite seleccionar fechas o rangos de fechas para filtrar información. Esta variante puede tener dos configuraciones:

• Inline: Está integrado de manera fija en la interfaz, visible en una sección específica de la página o aplicación sin necesidad de hacer clic para desplegarlo.‍
• Floating: Este tipo de calendario aparece temporalmente, generalmente cuando el usuario hace clic en un campo de fecha, y se despliega sobre el contenido de la página.

Leyenda

La leyenda funciona como una pequeña guía visual que explica qué significa cada color dentro del calendario. Así, cada color se asocia a un estado o categoría de día, como por ejemplo disponible, reservado o con evento.

Junto a cada color aparece una etiqueta que aclara su significado, para que cualquier persona pueda identificarlo de un vistazo.

Acciones

En algunos casos, el calendario incluye botones con acciones asociadas para facilitar la interacción. Estos botones mejoran la experiencia de uso al permitir tareas clave como confirmar una fecha, cancelar o borrar una selección, o navegar entre meses y años.

Sin embargo, no todos los calendarios funcionan igual: también existen versiones pensadas solo para consultar información, en las que no aparecen botones.

El comportamiento del calendario define cómo se adapta y responde en distintos contextos de uso. Incluye aspectos como los límites de anchura y altura para asegurar que siempre sea legible, así como su alineación en la interfaz para mantener consistencia con otros elementos.

También abarca la manera en la que la persona usuaria puede navegar y seleccionar años, meses o días, asegurando una interacción fluida y accesible. Estos comportamientos están diseñados para que el calendario se perciba claro, flexible y fácil de usar, tanto en pantallas pequeñas como en entornos más amplios.

Constraints

Mínima anchura: 320px. Máxima anchura: 480

Alineamiento

El calendario debe abrirse siempre alineado con el borde izquierdo del campo de texto (Text Field) al que está asociado, garantizando coherencia visual y una experiencia de uso predecible.

Tigger interaction

El calendario se activa a través de una interacción con su campo asociado. Este comportamiento garantiza que solo se muestre cuando la persona lo necesita, evitando distracciones innecesarias.

• Al seleccionar el campo de “Seleccionar fecha”, se abre el calendario.
• El calendario aparece vacío por defecto, con el día actual marcado.
• Puedes elegir un solo día o mover el cursor para seleccionar un rango de fechas.
• Una vez que selecciones el último día del rango, haz clic en “Aplicar” para confirmar la selección.