Skip to main content

Calendar

Calendar renders a single month view with built-in month navigation, reservation protection, and controlled or uncontrolled month state.

When to use it​

Choose Calendar when the user is selecting dates inside a focused monthly context:

  • booking forms
  • reservation detail pages
  • side panels or modals
  • pricing or availability widgets where the current month matters

Key props​

  • selected: current selection array
  • reserved: protected booking intervals
  • range: wait for two dates before completing selection
  • month and year: control the visible month
  • onMonthChange and onYearChange: react to navigation
  • disabled: block specific days or the entire calendar

Basic calendar

A minimal monthly booking view with protected reservations and controlled selection.

Live example
Loading interactive preview...
import { useState } from "react";
import { Calendar } from "@demark-pro/react-booking-calendar";
import "@demark-pro/react-booking-calendar/dist/react-booking-calendar.css";

const reserved = [
  {
    startDate: new Date(2030, 4, 12, 14, 0),
    endDate: new Date(2030, 4, 14, 10, 0),
  },
  {
    startDate: new Date(2030, 4, 18, 14, 0),
    endDate: new Date(2030, 4, 20, 10, 0),
  },
];

export function BookingCalendar() {
  const [selected, setSelected] = useState([null, null]);

  return (
    <Calendar
      selected={selected}
      reserved={reserved}
      onChange={setSelected}
      options={{ weekStartsOn: 1 }}
    />
  );
}

Controlled month navigation​

When you pass both month and year, the component becomes fully controlled for navigation:

<Calendar
  month={activeMonth}
  year={activeYear}
  onMonthChange={(nextMonth, nextYear) => {
    setActiveMonth(nextMonth);
    setActiveYear(nextYear);
  }}
/>

If you pass neither, the calendar manages the active month internally.

Notes​

  • initialDate only matters when month and year are uncontrolled
  • options.weekStartsOn lets you shift the first weekday
  • options.locale localizes the built-in month, weekday, day, and aria labels while the calendar grid stays Gregorian
  • the component also accepts regular div props such as className