Leaf UI
  • English

      • Calendar

      Browse dates, choose days and display a schedule.

      Basic usage

      Live previewBasic usage
      MonTueWedThuFriSatSun

      Selected date: 2026-10-4

      MonTueWedThuFriSatSun
      basic.tsx
      import { Calendar, Tag } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function CalendarBasic() {
  const [value, setValue] = useState(new Date(2026, 9, 4));
  return (
    <div className="leaf-demo-stack leaf-demo-stack--wide">
      <Calendar
        value={value}
        onChange={setValue}
        cellRender={(date) =>
          date.getMonth() === 9 && date.getDate() === 8 ? (
            <Tag color="primary" size="sm">
              Review
            </Tag>
          ) : date.getMonth() === 9 && date.getDate() === 15 ? (
            <Tag color="info" size="sm">
              Release
            </Tag>
          ) : null
        }
      />
      <p className="leaf-demo-note">
        Selected date: {value.getFullYear()}-{value.getMonth() + 1}-{value.getDate()}
      </p>
      <div className="leaf-demo-row">
        <Calendar
          fullscreen={false}
          defaultValue={new Date(2026, 9, 4)}
          disabledDate={(date) => date.getDay() === 0 || date.getDay() === 6}
        />
        <Calendar fullscreen={false} mode="month" defaultValue={new Date(2026, 9, 1)} />
      </div>
    </div>
  );
}

      Calendar API

      PropTypeDefaultDescription
      value / defaultValueDate—Controlled / initially selected date
      onChange(date: Date) => void—Called on date selection
      visibleDateDate—Controlled visible month or year
      onVisibleChange(date: Date) => void—Visible period change
      mode'date' | 'month''date'Choose days or months
      fullscreenbooleantrueUse a full calendar layout
      minDate / maxDateDate—Selectable date boundaries
      disabledDate(date: Date) => boolean—Disable specific dates
      cellRender(date: Date) => ReactNode—Add content below a day or month

      Types

      Import the component props and item types when preparing your own values.

      import type { CalendarProps } from '@sudden3/leaf-ui';

      Usage notes

      Use the full layout for schedules and fullscreen={false} for a compact calendar. Render non-interactive text or Tags in cellRender, without nesting controls in date buttons. Arrow keys move between dates, Home / End move within a row, and PageUp / PageDown change months. For SSR, supply the same initial date on server and client; see the SSR guide.

      SSR usage。