Tipos de calendario
Calendario desktop: ocupa 4 columnas de la grilla desktop de Obelisco.
Calendario mobile: ocupa el total del ancho del dispositivo y se utiliza para dispositivos móviles.
Diseño y estructura (contexto de uso)
El calendario está compuesto por un encabezado con el mes y año, una fila con los días de la semana, y 6 filas disponibles para los días del mes según corresponda. También, cuenta con una lista de referencias de las fechas seleccionadas.
Encabezado
Contiene el mes y el año del calendario.
Fila de días de la semana
Están todos los días de la semana representados por la inicial de cada día y siempre lleva fondo secundario.
Fila de días del mes
Contiene los números de todos los días del mes. Los días pueden estar seleccionados para resaltar la fecha necesaria, en gris claro para mostrar los días de meses anteriores/siguientes, u ocultos.
Referencia de una fecha del calendario
Señala las fechas seleccionadas dentro del calendario a modo de lista. Cuando hay más de 5 ítems en la lista, es recomendable utilizar un colapsable para reducir la carga cognitiva de la persona usuaria.
Las referencias de cada uno de los ítems listados en los calendarios pueden clasificarse por color. En este caso, las referencias cromáticas se alinean a la izquierda y se agrupan en un contenedor en la parte superior de la página y contar con el título Referencias.
Colores de las referencias
Cuando hay más de dos referencias dentro de un mismo calendario, se puede utilizar la paleta de colores de detalles cromáticos. Se debe cambiar el color de la tipografía al color de texto primario para garantizar un contraste óptimo.
Disposición
En mobile, los calendarios se apilan uno debajo del otro con una separación de 32px. En desktop, los calendarios se ordenan horizontalmente en filas de 3 con una separación vertical de 32px entre agrupaciones.
