스케줄러 React API · Needless UI

가져오기

import-scheduler.tsx

import { NuiScheduler, type NuiSchedulerHandle } from '@needless-ui/react/scheduler';

NuiScheduler

일정을 월, 주, 일, 일정 목록, 타임라인으로 보여 주는 스케줄러입니다.

NuiScheduler: 속성
이름	타입	기본값	설명
`events`prop	`NuiSchedulerEvent<T>[]`	`[]`	표시할 일정.
`resources`prop	`NuiSchedulerResource[]`	`[]`	회의실, 사람, 장비. 타임라인에서는 행이 되고, 일 보기와 주 보기에서는 열이 됩니다.
`view` `defaultView` `onViewChange`상태	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	표시된 보기.
`views`prop	`NuiSchedulerView[]`	`all`	사용자가 전환할 수 있는 보기. 기본값은 모든 보기이며, 타임라인은 리소스가 있을 때만 포함됩니다.
`timelineSpan`prop	`'day' \| 'week' \| 'month'`	`'day'`	타임라인이 보여 주는 범위. 하루를 시간 칸 단위로, 또는 한 주나 한 달을 날짜 단위로 보여 줍니다.
`date` `defaultDate` `onDateChange`상태	`NuiDate`	`today`	표시된 날짜. 키보드 포커스가 있는 날짜이기도 합니다. 서버에서 스케줄러를 렌더링할 때는 `defaultDate`를 전달하십시오. 서버의 오늘이 사용자의 오늘과 다를 수 있습니다.
`slotMinutes`prop	`number`	`30`	시간 그리드 한 행, 또는 하루 타임라인 한 열의 분 단위 길이.
`snapMinutes`prop	`number`	`slotMinutes`	일정을 옮기고 길이를 조절하는 간격.
`dayStart, dayEnd`prop	`number`	`0, 24`	시간 그리드가 보여 주는 시작 시각과 끝 시각.
`scrollHour`prop	`number`	`8`	시간 그리드가 처음 열릴 때 보여 주는 시각.
`agendaDays`prop	`number`	`30`	일정 목록이 앞으로 보여 줄 날짜 수.
`businessHours`prop	`NuiSchedulerHours[]`		근무 시간. 예를 들어 `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`처럼 지정합니다. 그 밖의 시간은 음영으로 표시됩니다.
`weekends`prop	`boolean`	`true`	주말을 표시합니다. 끄면 모든 보기에서 로케일의 주말을 뺍니다.
`weekNumbers`prop	`boolean`	`false`	월 보기와 시간 위쪽에 ISO 주 번호를 표시합니다.
`editable`prop	`boolean`	`false`	포인터와 키보드로 일정을 옮기고 길이를 조절할 수 있게 합니다.
`selectable`prop	`boolean`	`false`	그리드에서 시간을 선택해 일정을 만들 수 있게 합니다.
`allow`prop	`(time) => boolean`		이동, 길이 조절, 시간 선택을 허용할지 정합니다.
`toolbar`prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	툴바를 표시하거나, 전달받은 정보로 직접 만든 툴바를 그립니다.
`firstDay`prop	`1 … 7`		한 주의 첫 요일로, 1은 월요일입니다. 기본값은 로케일을 따릅니다.
`headingLevel`prop	`number`	`2`	제목의 수준. 일정 목록의 날짜 제목은 한 단계 더 깊어집니다.
`locale`prop	`string`	`'en-US'`	날짜와 시간의 서식을 정하는 로케일.
`labels`prop	`Partial<NuiSchedulerLabels>`		스케줄러가 표시하거나 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
`corners`prop	`NuiCorners`		모서리 모양: `round`, `squircle`, `bevel`, `scoop`, `notch`, `square` 중 하나.
`radius`prop	`NuiRadius`		모서리 크기: `none`, `small`, `medium`, `large`, `full` 중 하나.
`density`prop	`NuiDensity`		차지하는 공간: `compact`, `regular`, `roomy` 중 하나.
`renderEvent`렌더 prop	`(event, { time }) => ReactNode`		일정을 직접 그립니다. 일정과 텍스트로 된 시간을 받습니다.
`renderResource`렌더 prop	`(resource) => ReactNode`		리소스의 헤더를 직접 그립니다.
`onEventClick`콜백	`(event: NuiSchedulerEvent<T>) => void`		클릭하거나 Enter로 연 일정과 함께 호출됩니다.
`onEventChange`콜백	`({ event, start, end, resource? }) => void`		일정을 옮기거나 길이를 조절한 뒤 새 시간과 함께 호출되며, 리소스가 바뀌었으면 리소스도 함께 전달됩니다. 변경을 유지하려면 `events`를 갱신합니다.
`onSlotSelect`콜백	`({ start, end, allDay, resource? }) => void`		그리드에서 선택한 시간 및 그 리소스와 함께 호출됩니다.
`onRangeChange`콜백	`({ start, end }) => void`		표시되는 첫날과 마지막 날이 바뀌면 이 두 날짜와 함께 호출됩니다. 그 기간의 일정을 불러올 때 씁니다.
`ref`prop	`Ref<NuiSchedulerHandle>`		스케줄러의 `ref`로 쓸 수 있는 페이지 이동 기능입니다. 직접 만든 툴바에서 씁니다.
`previous, next, goToday`메서드	`() => void`		이전 또는 다음 페이지나 오늘을 보여 줍니다. 직접 만든 툴바에서 씁니다.
`title`속성	`string`		표시된 범위를 툴바 제목과 같은 방식으로 나타낸 텍스트.

상태는 React의 폼 입력 요소와 같은 방식으로 동작합니다. 값을 전달하고 on…Change 콜백에서 갱신하거나, default… 값을 전달해 컴포넌트가 보관하게 합니다.

설정하지 않은 커스터마이징 prop은 가장 가까운 data-nui-* 속성을 따릅니다. 자세한 내용은 커스터마이징 가이드를 참고하시기 바랍니다.

NuiSchedulerToolbar

toolbar 함수가 받는 값입니다. 직접 만든 툴바를 그릴 때 씁니다.

NuiSchedulerToolbar: 속성
이름	타입	설명
`title`속성	`string`	표시된 범위를 툴바 제목과 같은 방식으로 나타낸 텍스트.
`view, views`속성	`NuiSchedulerView, NuiSchedulerView[]`	표시된 보기와 전환할 수 있는 보기.
`setView, previous, next, goToday`메서드	`(view?) => void`	보기를 바꾸거나, 이전 또는 다음 페이지나 오늘을 보여 줍니다.

NuiSchedulerEvent

일정 하나입니다. 시간이 정해진 일정은 종료 시각을 포함하지 않고, 종일 일정의 종료일은 그 마지막 날입니다.

NuiSchedulerEvent: 속성
이름	타입	기본값	설명
`id, title`속성	`string`		일정의 키와 표시할 내용.
`start, end`속성	`NuiDateTime \| NuiDate`		날짜와 시간. 종일 일정은 날짜만 씁니다.
`allDay`속성	`boolean`		기본값은 `start`에 시간이 없는지에 따라 정해집니다.
`tone`속성	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	일정의 색상 팔레트.
`color, class`속성	`string`		톤보다 우선하는 임의의 CSS 색상과, 스타일을 지정할 클래스.
`resource`속성	`string \| string[]`		일정이 속한 리소스.
`rrule`속성	`string`		`FREQ=WEEKLY;BYDAY=MO` 같은 RFC 5545 반복 규칙.
`exdate`속성	`string[]`		일어나지 않는 회차의 시작 시각.
`recurrenceId`속성	`NuiDateTime \| NuiDate`		스케줄러가 알려 주는 회차에 붙는 값으로, 규칙이 정한 원래 시작 시각입니다.
`editable`속성	`boolean`		스케줄러 설정과 관계없이 이 일정을 옮길 수 있는지 여부.
`data`속성	`T`		일정과 함께 보관할 그 밖의 데이터.

NuiSchedulerResource

일정이 속하는 회의실, 사람, 장비입니다.

NuiSchedulerResource: 속성
이름	타입	설명
`id, title`속성	`string`	리소스의 키와 표시할 이름.
`tone, color`속성	`NuiSchedulerTone, string`	이 리소스에 속한 일정의 색. 일정에 고유한 색이 있으면 그 색을 씁니다.
`businessHours`속성	`NuiSchedulerHours[]`	이 리소스를 이용할 수 있는 시간으로, 스케줄러의 근무 시간 대신 쓰입니다.
`data`속성	`R`	리소스와 함께 보관할 그 밖의 데이터.

Helpers

반복 일정과 iCalendar 파일을 다루는 함수입니다.

Helpers: 속성
이름	타입	설명
`nuiSchedulerOccurrences`메서드	`(event, first, last) => NuiSchedulerEvent[]`	주어진 날짜에 표시되는 대로의 일정. 반복 일정이면 각 회차입니다.
`nuiSchedulerRule`메서드	`(text: string) => NuiSchedulerRule \| null`	반복 규칙을 읽습니다. 읽을 수 없으면 null을 반환합니다.
`nuiSchedulerToIcs`메서드	`(events, options?) => string`	일정을 iCalendar 파일로 씁니다.
`nuiSchedulerFromIcs`메서드	`(text, { timeZone? }) => NuiSchedulerEvent[]`	iCalendar 파일의 일정을 읽고, 시간을 하나의 시간대로 맞춥니다.