Saltar al contenido
EspañolEnglish
Todos los componentes (204)

Calendario laboral

Fechas y hora · WorkCalendarView

Qué es y cuándo usarlo

El mes con los festivos marcados en cada día (con su tipo y, si la fuente lo trae, la comunidad o el municipio) y, encima, cuántos días se trabaja ese mes. Un festivo en fin de semana se ve, pero no resta días laborables.

Los festivos los pones tú, y es a propósito. La biblioteca no lleva ninguno dentro: cada año el BOE publica los nacionales, cada comunidad (y cada municipio) los suyos, con traslados cuando caen en domingo, y las fuentes ni siquiera coinciden entre sí. Una tabla escrita aquí estaría mal el año que viene. Lo que sí trae:

  • createWorkCalendar(holidays): el cálculo sin pantalla (isWorkingDay, countWorkingDays, addWorkingDays, summarizeMonth) y isDateUnavailable, listo para DatePicker, Calendar y DateRangePicker.
  • parseIcsHolidays y parseCsvHolidays: leen los formatos que publican los portales de datos abiertos (la Xunta de Galicia ofrece un .ics y un CSV; el Gobierno de Aragón y el Gobierno Vasco, CSV y JSON). Devuelven los festivos y una lista rejected con las líneas que no han podido leer, para que no se pierdan en silencio.

Dónde buscar los datos: la resolución anual de la Dirección General de Trabajo en el BOE (festivos nacionales y los que cada comunidad fija), los conjuntos «Calendario laboral» de datos.gob.es de cada comunidad y la web de cada ayuntamiento para los locales. Comprueba la licencia de cada uno. Cárgalos en el servidor y pásalos como holidays: muchos portales no permiten leerlos desde el navegador (CORS).

Cuándo usarlo: cuadros de mando de RR. HH., fichajes, planificación, vencimientos que no caen en festivo.

Cuándo no: para citas con hora, WeekAgenda; para un mes de eventos cualquiera, MonthAgenda.

Accesibilidad: la de MonthAgenda (calendario con flechas, el día elegido se anuncia con sus festivos); el resumen es una lista de definición con nombre; el tipo de festivo se dice con texto, no solo con el color.

Cómo se ve

Días laborables
21
Festivos entre semana
1
  • Nacional
  • Autonómico
  • Local
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

lunes, 12 de octubre

  • Todo el díaFiesta nacional de ejemploNacional

El primer festivo es el 2026-10-12: Fiesta nacional de ejemplo.

<WorkCalendarView
  label="Calendario laboral"
  holidays={[
    { date: '2026-10-12', name: 'Fiesta nacional', scope: 'national' },
    { date: '2026-11-02', name: 'Fiesta autonómica', scope: 'regional', region: 'Mi comunidad' },
  ]}
  initialDay="2026-10-12"
/>

Props

Se importa con import { WorkCalendarView } from '@amset/ui'. Las obligatorias van marcadas.

PropTipoPara qué sirve
holidaysobligatoriareadonly Holiday[]Los festivos, tal como los publica la fuente oficial de cada comunidad o municipio. La biblioteca no lleva ninguno dentro: cambian cada año. Para leerlos de un `.ics` o un CSV, `parseIcsHolidays` y `parseCsvHolidays`.
labelobligatoriastringDe que es la agenda. Obligatoria: nombra el calendario.
classNamestringSe une a las clases de la biblioteca, no las sustituye.
daystringEl dia (`AAAA-MM-DD`) que se enseña, controlado desde fuera. Por defecto, hoy.
disabledbooleanTodo apagado y fuera del recorrido del teclado: ni se cambia de dia ni de mes. La lista se sigue leyendo.
initialDaystring—
maxstringEl ultimo dia al que se puede ir, `AAAA-MM-DD`. Los de despues, apagados.
minstringEl primer dia al que se puede ir, `AAAA-MM-DD`. Los de antes salen apagados y el foco no pasa por ellos.
onDayChange(iso: string) => void—
onDaySelect(iso: string) => voidAvisa con el dia elegido (Intro, Espacio o clic).
onEventPress(key: string) => voidAvisa con la clave del evento pulsado en la lista del dia (los de `href` son enlaces y avisan al seguirlos).
size"sm" | "md" | "lg"Celdas de 38, 44 o 52 px de alto (`sm`, `md`, `lg`), la letra y los puntos a juego y los botones de mes del alto de un control. Con el dedo, ninguna celda baja de 44 px.
weekendreadonly number[]Los dias de la semana que no se trabajan, 1 (lunes) a 7 (domingo). Por defecto, sabado y domingo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: