Keep calendar selections in app state

Use controlled props when other UI needs the same year, states, or view. Each controlled value has a matching change callback.

1import { useState } from "react";
2import { HolidayCalendar, type CalendarView } from "@qentrah/react-calendar";
3import "@qentrah/react-calendar/styles.css";
4 
5export default function Holidays() {
6  const [year, setYear] = useState(2026);
7  const [states, setStates] = useState(["johor"]);
8  const [view, setView] = useState<CalendarView>("grid");
9  return (
10    <HolidayCalendar
11      year={year}
12      onYearChange={setYear}
13      states={states}
14      onStatesChange={setStates}
15      view={view}
16      onViewChange={setView}
17      showJumpButton={false}
18    />
19  );
20}

Calendar interactions call the change handlers. React updates the app state, then renders the selected values. Use defaultYear, defaultStates, and defaultView when the calendar can own its state. Avoid switching a prop between controlled and uncontrolled during its lifetime.

Read all props.

Use controlled props when other UI needs the same year, states, or view. Each controlled value has a matching change callback.

1import { useState } from "react";
2import { HolidayCalendar, type CalendarView } from "@qentrah/react-calendar";
3import "@qentrah/react-calendar/styles.css";
4 
5export default function Holidays() {
6  const [year, setYear] = useState(2026);
7  const [states, setStates] = useState(["johor"]);
8  const [view, setView] = useState<CalendarView>("grid");
9  return (
10    <HolidayCalendar
11      year={year}
12      onYearChange={setYear}
13      states={states}
14      onStatesChange={setStates}
15      view={view}
16      onViewChange={setView}
17      showJumpButton={false}
18    />
19  );
20}

Read all props.