캘린더

월·주·일 뷰와 일정 드래그·크기 조절을 지원하는 캘린더입니다. 로직과 화면이 분리돼 있어(headless) 원하는 대로 꾸밀 수 있습니다.

@tissue-ui/calendar-react

설치

bash

npm install @tissue-ui/calendar @tissue-ui/calendar-react @tissue-ui/calendar-themes

기본 CSS 를 한 번 불러옵니다: import "@tissue-ui/calendar-themes/base.css"

라이브 데모

Sun

Mon

Tue

Wed

Thu

Fri

Sat

일정을 끌어 옮기거나 눌러 보세요.

기본 사용법

headless 라 Calendar 안에 CalendarHeader·CalendarBody 를 넣어 화면을 조립합니다. events 로 일정을, defaultView 로 처음 뷰를 정하고, 높이가 있는 컨테이너 안에 두세요.

tsx

import { Calendar, CalendarHeader, CalendarBody } from "@tissue-ui/calendar-react";
import "@tissue-ui/calendar-themes/base.css";

const events = [
  {
    id: "1",
    title: "기획 회의",
    start: new Date(2026, 6, 15, 10),
    end: new Date(2026, 6, 15, 11),
  },
];

export function Demo() {
  return (
    <div style={{ height: 520 }}>
      <Calendar events={events} defaultView="month" style={{ height: "100%" }}>
        <CalendarHeader />
        <CalendarBody />
      </Calendar>
    </div>
  );
}

주요 구성 요소

Calendar — 전체 캘린더. MonthView·WeekView·DayView 로 원하는 뷰만 쓸 수도 있습니다.
훅: useCalendarStore·useEventDrag·useEventResize 등으로 동작을 직접 제어.
@tissue-ui/calendar — store·날짜 유틸(코어). React 없이도 씁니다.