이벤트 끌어서 이동 및 크기 조정

사용자가 마우스로 이벤트를 드래그하거나 이벤트 가장자리를 조정해 기간을 변경할 수 있습니다. 스케줄러는 상호작용 중에는 원본 항목을 변경하지 않고, 포인터를 놓은 후에만 변경 후보를 커밋합니다.

이 예제에서는 스케줄러 생성 및 데이터 바인딩 항목에서 만든 스케줄러를 이어서 사용합니다. wjScheduler, itemsSource, scheduler가 이미 정의되어 있고, 호스트 요소의 높이도 지정되어 있다고 가정합니다.

마우스 상호작용 설정

드래그와 크기 조정은 기본적으로 활성화되어 있습니다. 특정 상호작용을 비활성화해야 하는 경우에만 해당 속성을 false로 설정하세요.

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource,
  allowDragEvent: true,
  allowResizeEvent: false,
});

지원되는 레이아웃

이벤트 이동

이동 작업에서는 이벤트의 전체 기간과 이벤트 내 포인터의 위치가 유지됩니다. 다른 리소스로 이동하면 시간 범위는 그대로 유지되고, 대상 레인에 맞게 리소스 필드가 업데이트됩니다.

여러 날짜나 리소스 영역에 걸친 이벤트는 드래그하는 동안 여러 개의 미리 보기 조각으로 표시될 수 있습니다. 이 조각들은 각각 별도의 이벤트가 아니라 변경 예정인 하나의 원본 항목을 나타냅니다. 작업이 완료되거나 취소될 때까지 기존 이벤트 조각은 흐리게 표시됩니다.

요약 보기에서는 항목을 셀 사이로 이동할 수 있지만, 요약 크기가 고정되어 있어 크기를 조정할 수는 없습니다.

이벤트 크기 조정

크기 조정은 포인터가 위치한 가장자리만 변경합니다.

• 세로 시간 기반 보기에서는 위쪽 가장자리를 드래그해 시작 시간을 변경하고, 아래쪽 가장자리를 드래그해 종료 시간을 변경합니다.

• 가로 시간 기반 보기에서는 왼쪽 가장자리를 드래그해 시작 시간을 변경하고, 오른쪽 가장자리를 드래그해 종료 시간을 변경합니다.

반대쪽 가장자리는 변경되지 않습니다. 스케줄러는 변경 후보의 시간 구간이 유효하도록 유지하며 시작 시간이 종료 시간보다 늦어지지 않도록 합니다. 작업 중 날짜를 넘는 후보는 여러 미리 보기 조각으로 나뉠 수 있습니다.

크기 조정 규칙

크기 조정 시 유효하지 않은 값이 계산되면 30분 간격을 대체값으로 사용합니다. 이는 설정된 시간 슬롯의 길이와는 별개이며, 모든 이벤트에 적용되는 최소 기간을 의미하지 않습니다. 기존 이벤트의 기간이 30분보다 짧다면 해당 기간은 그대로 유지됩니다.

변경 수명 주기 처리

이동과 크기 조정은 SchedulerItemChangeAction.Update로 처리되며, 이동 또는 크기 조정 전용 이벤트는 없습니다.

scheduler.itemChanging.addHandler((_sender, args) => {
  console.log('candidate', args.request.values);
  if (!canEdit(args.request.item)) {
    args.cancel = true;
  }
});

scheduler.conflictChecked.addHandler((_sender, args) => {
  const conflicts = args.result?.conflicts ?? [];
  if (conflicts.length > 0 && !allowConflicts) {
    args.cancel = true;
  }
});

scheduler.itemChanged.addHandler((_sender, args) => {
  persistEvent(args.result.item);
});

수명 주기는 포인터를 놓은 후에 실행됩니다.

포인터를 움직이는 동안에는 충돌 검사가 계속 수행되지 않습니다. 요청을 취소하거나 유효하지 않은 위치에서 마우스를 놓거나 Escape 키를 누르면 원본 항목은 변경되지 않습니다.

변경 후보 값 확인

itemChanging에서 args.request.item은 상호작용 전의 원본 항목을 나타내고, args.request.values에는 변경 예정인 값이 포함됩니다. 이동 요청에는 대상 시작 시간과 종료 시간, 대상 셀에서 가져온 리소스 필드가 포함됩니다. 크기 조정 요청에는 대상 시작 시간과 종료 시간이 포함되며, 리소스 필드는 변경되지 않습니다.

업데이트가 성공하면 itemChanged의 args.result.item에서 변경 사항이 반영된 원본 항목을 가져올 수 있습니다. 저장 및 애플리케이션 상태 조정에는 미리 보기 요소가 아닌 이 원본 항목을 사용하세요.

미리 보기, 취소 및 정리

이동 또는 크기 조정 중에는 원본 항목이 변경되지 않습니다. 기존 이벤트 조각은 흐리게 표시되고, 변경 예정인 위치는 미리 보기로 나타납니다. 미리 보기 조각은 시각적 표시만을 위한 것으로, 히트 테스트와 키보드 포커스 및 보조 기술의 대상에서 제외됩니다.

포인터가 유효한 셀을 잠시 벗어나더라도 항목이 즉시 커밋되거나 변경되지는 않습니다. 유효한 대상으로 돌아오면 상호작용을 계속할 수 있습니다. 유효하지 않은 대상에서 마우스를 놓거나 Escape 키를 누르면 작업이 취소되고 미리 보기와 임시 상호작용 상태가 제거됩니다.

유효한 변경 후보를 놓은 경우에만 항목 변경 이벤트가 발생합니다. Escape 키로 상호작용을 취소했다면 이후 마우스를 놓더라도 업데이트가 제출되지 않습니다.

여러 리소스 값

allowMultiple: true로 설정된 리소스 설명자의 경우, 이벤트를 한 리소스 영역에서 다른 영역으로 이동하면 해당 리소스 값만 변경되고 나머지 리소스 값은 유지됩니다. 스케줄러는 리소스 배열에 중복된 값을 추가하지 않습니다.