YearView

YearView

독립형 스케줄 연간 뷰 컴포넌트예요. @mantine/schedule 패키지로 제공돼요.

출처: 문서

본문

사용법

YearView는 한 해의 12개월을 그리드 레이아웃으로 표시해요. 이벤트 표시기는 요일 셀에 색상 점으로 나타나요.

주 번호와 함께

withWeekNumbers를 설정해 각 달의 첫 번째 열에 주 번호를 표시해요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView withWeekNumbers events={events} />;
}

요일 이름 없이

withWeekDays={false}로 각 달의 요일 이름 행을 숨겨요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView withWeekDays={false} events={events} />;
}

Render day

renderDay를 사용해 요일 셀의 전체 콘텐츠를 교체해요. 이 함수는 YYYY-MM-DD 형식의 요일 날짜와 해당 날짜에 그룹화된 이벤트를 받아요 – 기본 표시기를 렌더링하는 데 사용되는 같은 목록이지만, 3개 항목 제한은 없어요.

주말 숨기기

withWeekendDays={false}로 주말을 숨겨요. 각 달 그리드는 나머지 열로 줄어들고, 숨겨진 요일에만 있는 이벤트는 표시되지 않아요. 주말로 간주되는 요일은 weekendDays prop으로 제어돼요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView withWeekendDays={false} events={events} />;
}

바깥 날짜 숨기기

withOutsideDays={false}로 인접 달의 날짜를 숨겨요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView withOutsideDays={false} events={events} />;
}

주의 첫 번째 요일

firstDayOfWeek로 주가 시작하는 요일을 제어해요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView firstDayOfWeek={0} events={events} />;
}

요일 형식

weekdayFormat prop으로 요일 이름을 커스터마이즈해요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView weekdayFormat="dd" events={events} />;
}

오늘 강조

highlightToday={false}로 현재 요일 강조를 비활성화해요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView highlightToday={false} events={events} />;
}

헤더 없이

withHeader={false}로 헤더 컨트롤을 숨겨요.

import { YearView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <YearView withHeader={false} events={events} />;
}

커스텀 헤더

ScheduleHeader 복합 컴포넌트와 자신만의 컨트롤을 결합해 커스텀 헤더를 만들 수 있어요. 뷰에 withHeader={false}를 설정하고 헤더를 외부에서 구성해요.

반복 이벤트

YearView는 보이는 해에 대해 반복 이벤트를 자동으로 확장해요. 자세한 문서는 Recurring events guide를 참고하세요.

정적 모드

mode="static"으로 모든 상호작용을 비활성화해요.

현지화

locale prop으로 dayjs 로케일을 설정해 날짜를 현지화할 수 있어요.

반응형 스타일

YearView는 반응형 스타일을 지원해요.

접근성

YearView는 접근성을 지원해요.

더 알아보기 (Learn more)

• Recurring events guide
• WeekView