Calendar

Month grid for picking a date or a range.

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Import

import { Calendar } from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

import { useState } from "react";
import { Calendar } from "@pelagornis/page/components";

export default function CalendarDemo() {
  const [date, setDate] = useState(() => new Date());

  return <Calendar value={date} onChange={setDate} weekStartsOn={1} />;
}

Use in MDX

Calendar can be written straight in an .mdx page. Import it below the frontmatter. It responds to input, so add client:load to hydrate it.

---
title: Example
---

import { Calendar } from "@pelagornis/page/components";

<Calendar client:load weekStartsOn={1} />

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

---
import CalendarExample from "../CalendarExample";
---

<CalendarExample client:load />

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "calendar-example": {
      render: component("./src/components/markdoc/CalendarExample.astro"),
      selfClosing: true,
    },
  },
});

{% calendar-example /%}

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
`root`	calendar
`day`	calendar-day

States

States the component styles. Component states are exposed as data attributes.

Kind	States
Pseudo	`focus-visible`

Keyboard

Keys the component handles when it has focus.

Key	Action
`Enter`	activate
`Space`	activate

Reference

RefineUI · Calendar for design guidance and token detail.
Use in MDX and Use in Markdoc for the general rules.