Use your own holiday data

Pass a HolidayDataset to replace the bundled data. No server is required.

Model

Each numeric year maps to an object with year, publicHolidays, and schoolHolidays. Public events have date, name, and regions. School ranges have startDate, endDate, name, and group A or B, with optional regions. Dates use YYYY-MM-DD and school ranges include both endpoints. Include at least one year; an empty dataset throws an error. An unsupported selected year falls back to the first dataset year.

Sample event

This team-planning event is sample data, not an official holiday.

1import { HolidayCalendar, type HolidayDataset } from "@qentrah/react-calendar";
2import "@qentrah/react-calendar/styles.css";
3 
4const data: HolidayDataset = {
5  2026: {
6    year: 2026,
7    publicHolidays: [
8      {
9        date: "2026-06-15",
10        name: "Team planning day",
11        regions: ["nationwide"],
12      },
13    ],
14    schoolHolidays: [],
15  },
16};
17 
18export default function CustomCalendar() {
19  return (
20    <HolidayCalendar
21      data={data}
22      defaultYear={2026}
23      defaultStates={[]}
24      defaultView="list"
25      defaultTheme="dark"
26      defaultVisibility={{ public: true, school: false, annualLeave: false }}
27      showRelatedLinks={false}
28      showFooter={false}
29      showJumpButton={false}
30    />
31  );
32}

Edit the model and preview the result. The builder saves changes in your browser tab; its Code page includes the edited event. It does not publish your data or change the bundled dataset.

Model

Sample event

This team-planning event is sample data, not an official holiday.

1import { HolidayCalendar, type HolidayDataset } from "@qentrah/react-calendar";
2import "@qentrah/react-calendar/styles.css";
3 
4const data: HolidayDataset = {
5  2026: {
6    year: 2026,
7    publicHolidays: [
8      {
9        date: "2026-06-15",
10        name: "Team planning day",
11        regions: ["nationwide"],
12      },
13    ],
14    schoolHolidays: [],
15  },
16};
17 
18export default function CustomCalendar() {
19  return (
20    <HolidayCalendar
21      data={data}
22      defaultYear={2026}
23      defaultStates={[]}
24      defaultView="list"
25      defaultTheme="dark"
26      defaultVisibility={{ public: true, school: false, annualLeave: false }}
27      showRelatedLinks={false}
28      showFooter={false}
29      showJumpButton={false}
30    />
31  );
32}

Edit the model and preview the result. The builder saves changes in your browser tab; its Code page includes the edited event. It does not publish your data or change the bundled dataset.