Skip to content
EspañolEnglish
All components (204)

Work calendar

Dates and time · WorkCalendarView

What it is and when to use it

The month with the holidays marked on each day (with their type and, if the source provides it, the region or municipality) and, above it, how many days are worked that month. A holiday on a weekend is shown, but does not subtract working days.

You supply the holidays, and that is on purpose. The library carries none: every year the BOE publishes the national ones, each region (and each municipality) its own, with moves when they fall on a Sunday, and the sources do not even agree with each other. A table written here would be wrong next year. What it does ship:

  • createWorkCalendar(holidays): the calculation without a screen (isWorkingDay, countWorkingDays, addWorkingDays, summarizeMonth) and isDateUnavailable, ready for DatePicker, Calendar and DateRangePicker.
  • parseIcsHolidays and parseCsvHolidays: they read the formats open-data portals publish (the Xunta de Galicia offers an .ics and a CSV; the Aragon and Basque governments, CSV and JSON). They return the holidays and a rejected list with the lines that could not be read, so nothing is lost silently.

Where to find the data: the annual resolution of the Dirección General de Trabajo in the BOE (national holidays and those each region sets), the "Calendario laboral" datasets of datos.gob.es for each region and each town hall's website for the local ones. Check the licence of each. Load them on the server and pass them as holidays: many portals do not allow reading them from the browser (CORS).

When to use it: HR dashboards, time clocking, planning, due dates that must not land on a holiday.

When not to: for appointments with a time, WeekAgenda; for a month of any events, MonthAgenda.

Accessibility: that of MonthAgenda (arrow-key calendar, the chosen day is announced with its holidays); the summary is a named definition list; the holiday type is said in text, not only with colour.

What it looks like

Working days
21
Weekday holidays
1
  • National
  • Regional
  • Local
27
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

Monday, October 12

  • All dayExample national holidayNational

The first holiday is 2026-10-12: Example national holiday.

<WorkCalendarView
  label="Work calendar"
  holidays={[
    { date: '2026-10-12', name: 'National holiday', scope: 'national' },
    { date: '2026-11-02', name: 'Regional holiday', scope: 'regional', region: 'My region' },
  ]}
  initialDay="2026-10-12"
/>

Props

Import it with import { WorkCalendarView } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
holidaysrequiredreadonly Holiday[]The holidays, as published by the official source of each region or municipality. The library carries none: they change every year. To read them from an `.ics` or a CSV, `parseIcsHolidays` and `parseCsvHolidays`.
labelrequiredstringWhat the agenda is about. Required: it names the calendar.
classNamestringMerged with the library classes; it does not replace them.
daystringThe day (`YYYY-MM-DD`) that is shown, controlled from outside. By default, today.
disabledbooleanEverything is turned off and removed from the keyboard order: neither the day nor the month can be changed. The list can still be read.
initialDaystring—
maxstringThe last day that can be navigated to, `YYYY-MM-DD`. The ones after it are grayed out.
minstringThe first day that can be navigated to, `YYYY-MM-DD`. Earlier ones are dimmed and focus does not pass through them.
onDayChange(iso: string) => void—
onDaySelect(iso: string) => voidCalled with the chosen day (Enter, Space or click).
onEventPress(key: string) => voidNotifies with the key of the event pressed in the day list (those with `href` are links and notify when followed).
size"sm" | "md" | "lg"Cells 38, 44 or 52 px tall (`sm`, `md`, `lg`), with the font and the dots to match and the month buttons at the height of a control. With a finger, no cell goes below 44 px.
weekendreadonly number[]The days of the week that are not worked, 1 (Monday) to 7 (Sunday). By default, Saturday and Sunday.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: