Needless UI

컴포넌트

스케줄러

일정을 월, 주, 일, 일정 목록으로 보여 주고, 드래그로 원하는 자리에 옮깁니다.

가져오기

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

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

셀렉터
nui-scheduler
이름타입기본값설명
events입력NuiSchedulerEvent<T>[][]표시할 일정.
view양방향'month' | 'week' | 'day' | 'agenda''week'표시된 보기.
views입력NuiSchedulerView[]all four사용자가 전환할 수 있는 보기.
date양방향NuiDatetoday표시된 날짜. 키보드 포커스가 있는 날짜이기도 합니다.
slotMinutes입력number30시간 그리드 한 행의 분 단위 길이. 일정이 움직이는 간격이기도 합니다.
scrollHour입력number8시간 그리드가 처음 열릴 때 보여 주는 시각.
agendaDays입력number30일정 목록이 앞으로 보여 줄 날짜 수.
editable입력booleanfalse포인터와 키보드로 일정을 옮기고 길이를 조절할 수 있게 합니다.
selectable입력booleanfalse그리드에서 시간을 선택해 일정을 만들 수 있게 합니다.
firstDay입력1 … 7한 주의 첫 요일로, 1은 월요일입니다. 기본값은 로케일을 따릅니다.
headingLevel입력number2제목의 수준. 일정 목록의 날짜 제목은 한 단계 더 깊어집니다.
locale입력stringLOCALE_ID날짜와 시간의 서식을 정하는 로케일.
labels입력Partial<NuiSchedulerLabels>스케줄러가 표시하거나 읽어 주는 모든 텍스트. 번역할 때 사용합니다.
corners입력NuiCorners모서리 모양: round, squircle, bevel, scoop, notch, square 중 하나.
radius입력NuiRadius모서리 크기: none, small, medium, large, full 중 하나.
density입력NuiDensity차지하는 공간: compact, regular, roomy 중 하나.
eventClick출력NuiSchedulerEvent<T>클릭하거나 Enter로 연 일정을 내보냅니다.
eventChange출력{ event, start, end }일정을 옮기거나 길이를 조절한 뒤 새 시간을 내보냅니다.
slotSelect출력{ start, end, allDay }그리드에서 선택한 시간을 내보냅니다.
rangeChange출력{ start, end }표시되는 첫날과 마지막 날이 바뀌면 이를 내보냅니다.

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

NuiSchedulerEvent

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

이름타입기본값설명
id, title속성string일정의 키와 표시할 내용.
start, end속성NuiDateTime | NuiDate날짜와 시간. 종일 일정은 날짜만 씁니다.
allDay속성boolean기본값은 start에 시간이 없는지에 따라 정해집니다.
tone속성'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'일정의 색상.
editable속성boolean스케줄러 설정과 관계없이 이 일정을 옮길 수 있는지 여부.
data속성T일정과 함께 보관할 그 밖의 데이터.

NuiSchedulerEventTemplate

일정을 그립니다. 컨텍스트에는 일정과 텍스트로 된 시간이 들어 있습니다.

셀렉터
ng-template[nuiSchedulerEvent]