Calendar

󰯡

Nov󰯑

2026󰯑

󰯯

Mon

Tue

Wed

Thu

Fri

Sat

Sun

2627282930311

2345678

9101112131415

16171819202122

23242526272829

30123456

インポート

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

例

上のプレビューはこのファイルを描画したものです。src/components/ にコピーして使い始めてください。

src/components/CalendarExample.tsx

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} />;
}

MDX で使う

Calendar は .mdx ページにそのまま書けます。frontmatter の下でインポートしてください。入力に反応するので、client:load を付けてハイドレートします。

src/content/docs/example.mdx

---
title: Example
---

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

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

Markdoc で使う

Markdoc のタグは Astro コンポーネントを描画しますが、このコンポーネントにはクライアントの状態が必要です。例をハイドレートする .astro ファイルで包み、そのファイルをタグとして登録してください。

src/components/markdoc/CalendarExample.astro

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

<CalendarExample client:load />

markdoc.config.mjs

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,
    },
  },
});

src/content/docs/example.mdoc

{% calendar-example /%}

構造

コンポーネントを構成するパーツと、それぞれが描画する data-refineui のロールです。

パーツ	ロール
root	calendar
day	calendar-day

状態

コンポーネントがスタイルを当てる状態です。コンポーネントの状態は data 属性として公開されます。

種類	状態
疑似クラス	focus-visible

キーボード

フォーカスがあるときにコンポーネントが処理するキーです。

キー	動作
Enter	activate
Space	activate

参考

• デザインのガイドとトークンの詳細は RefineUI · Calendar を参照してください。
• 共通のルールは MDX で使う と Markdoc で使う を参照してください。