고급 레이아웃 만들기

기본 제공 뷰로 시간 및 리소스 데이터를 원하는 방식으로 표시하기 어렵다면 사용자 지정 SchedulerDefinition을 사용합니다. SchedulerDefinition에서는 행과 열 축에 시간 및 리소스 필드를 순서대로 배치해 원하는 레이아웃을 구성할 수 있습니다.

사용자 정의 레이아웃 정의

바인딩 순서에 따라 바깥쪽 그룹이 결정됩니다. 리소스 바인딩의 fieldExpr는 설정된 리소스 설명자의 fieldExpr와 일치해야 합니다.

const definition: wjScheduler.SchedulerDefinition = {
  key: 'weekByRoom',
  rows: {
    bindings: [{
      type: wjScheduler.SchedulerAxisBindingType.Time,
      unit: wjScheduler.SchedulerTimeUnit.Hour,
    }],
  },
  columns: {
    bindings: [
      { type: wjScheduler.SchedulerAxisBindingType.Time, unit: wjScheduler.SchedulerTimeUnit.DayOfWeek },
      { type: wjScheduler.SchedulerAxisBindingType.Resource, fieldExpr: 'roomId' },
    ],
  },
  cellSemantic: wjScheduler.SchedulerCellSemantic.Timed,
};

scheduler.definition = definition;

렌더링 전 레이아웃 확인

뷰를 동적으로 구성하거나 설정을 통해 전달하는 경우 planSchedulerProjection을 사용합니다. 이 함수는 스케줄러의 상태를 변경하지 않고 정의를 분석합니다.

const plan = wjScheduler.planSchedulerProjection(definition);
console.log(plan.slotAxis);
console.log(plan.integrity.level);
console.log(plan.integrity.reasons);

plan.integrity.level은 정의된 대로 뷰를 렌더링할 수 있는지 알려줍니다.

스케줄러가 지정된 바인딩 순서를 유지할 수 없는 경우, 레이아웃을 조정하고 plan.integrity.reasons에 그 이유를 기록합니다.

메시지에 바인딩이 정규화되거나 바깥쪽 그룹으로 표시된다고 나올 수 있습니다. 이는 해당 바인딩이 시간 축을 감싸는 상위 그룹으로 배치되었다는 의미입니다.

시간 기반 정의 규칙

시간 기반 레이아웃은 이벤트를 시간 범위에 따라 배치하며, 하나의 연속적인 시간 단위(Hour) 축이 필요합니다.

시간 기반 정의에서는 time:hour 바인딩을 통해 연속적인 시간 축을 구성해야 합니다. 시간 바인딩은 행 축 또는 열 축 중 한 곳에 단독으로 배치하고, 다른 바인딩은 반대쪽 축에 배치합니다. 스케줄러가 레이아웃을 정규화하는지 확인하려면 planSchedulerProjection을 사용하세요.

요약 정의 규칙

요약 레이아웃은 셀 안에 고정 크기 항목을 배치하며 time:hour 바인딩이 필요하지 않습니다.

지원되지 않는 정의 처리

사용자가 입력한 설정을 적용할 때는 사용자 지정 정의가 유효한지 먼저 확인하고, 지원되지 않는 경우 사용할 수 있는 대체 뷰를 제공하세요. 정의를 동적으로 생성하는 경우에는 try/catch를 사용해 할당 과정에서 발생하는 오류에 대비할 수도 있습니다.

const plan = wjScheduler.planSchedulerProjection(definition);

if (plan.integrity.level === 'unsupported') {
  scheduler.definition = wjScheduler.createSchedulerDefinitionPreset(
    wjScheduler.SchedulerBuiltInViewItem.Week
  );
} else {
  scheduler.definition = definition;
}

새 레이아웃을 테스트할 때는 정의를 최소한으로 유지하세요. 시간 바인딩 하나로 시작한 다음 리소스 바인딩을 하나씩 추가하고, 축을 더 추가하기 전에 결과 그룹화가 예상대로 표시되는지 확인합니다.