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에서 사용을 참고하세요.