createTimelineView

스케줄러에서 Timeline 뷰를 설정합니다.

void createTimelineView(object config);

config

object

Timeline 뷰의 구성 객체

Available only in PRO Edition

Example

// 오전 8시부터 오후 8시까지 30분 간격의 시간 스케일
scheduler.createTimelineView({
    name: "timeline",
    x_unit: "minute",
    x_date: "%H:%i",
    x_step: 30,
    x_size: 24,
    x_start: 16,
    x_length: 48,
    fit_events_offset: 15,
    y_unit:[    
        {key:1, label:"Section A"},
        {key:2, label:"Section B"},
        {key:3, label:"Section C"},
        {key:4, label:"Section D"}  
    ],
    y_property: "section_id",
    render: "bar"
});

Applicable views:타임라인 뷰

Related samples

Details

이 기능은 PRO 에디션에서만 사용할 수 있습니다.

이 메서드는 timeline 플러그인이 활성화되어 있어야 합니다.

Timeline 뷰의 구성 객체는 다음 속성들을 지원합니다:

name- (string) 뷰의 식별자입니다. 기존 Timeline 뷰와 동일한 이름을 정의하면 덮어씁니다.
render - ('cell', 'bar', 'tree', 'days') 뷰 모드를 정의합니다. 기본값은 'cell'입니다.
y_property - (string) 이벤트를 특정 섹션에 연결하는 데 사용하는 데이터 속성입니다.
y_unit - (객체 배열) 뷰 내 섹션을 정의합니다.
각 객체는 다음 속성을 가진 섹션을 나타냅니다:
- children - (배열) 'Tree' 모드에서만 사용되는 중첩 항목
- key - (string) 섹션의 ID로, 이벤트의 속성과 매칭하여 이벤트를 할당합니다.
- label - (string) 섹션의 표시 레이블
- open - (boolean) 섹션이 처음에 확장되어 있는지 여부 ('Tree' 모드용)
days - (number) Y축에 표시할 항목(일) 수로, 'Days' 모드에서만 관련 있습니다.
x_unit - (minute, hour, day, week, month, year) X축의 단위입니다. 기본값은 'minute'입니다.
x_date - (string) X축 날짜 형식(자세한 내용은 날짜 형식 지정 참고). 설정하지 않으면 hour_date 형식을 사용합니다.
x_step - (number) X축의 단위 'x_unit' 기준 스텝 크기입니다. 기본값은 1입니다.
x_start - (number) X축에서의 오프셋으로 'x_unit' 단위입니다. 기본값은 0입니다.
x_size - (number) X축 전체 길이로 'x_step' 개수로 표현합니다. 기본값은 24입니다.
x_length - (number) 스케줄러 헤더의 'next' 버튼 클릭 시 스크롤되는 'x_step' 수입니다. 선택 사항이며 기본값은 1입니다. 이 파라미터는 약간 까다로우니 참고하세요:
- x_unit='minute' 또는 x_unit='hour'일 때만 적용됩니다. 그렇지 않으면 생략할 수 있습니다.
- 이 단위에서 x_length가 설정되지 않으면, 타임라인은 다른 스케일 파라미터(x_start, x_step, x_size)를 기반으로 부분적인 하루 구간을 표시하며, 일별 구간 스크롤이 가능합니다.
- x_length를 설정할 경우, 'next' 버튼이 제대로 작동하도록 하루 전체를 커버하는 x_steps 수여야 합니다.
first_hour - (number) 셀 내 시간 구간의 시작 시각으로, x_unit="day"일 때만 사용됩니다.
last_hour - (number) 셀 내 시간 구간의 종료 시각으로, x_unit="day"일 때만 사용됩니다.
show_unassigned (boolean) false일 경우, 섹션에 할당되지 않은 이벤트는 표시되지 않으며, true일 경우 첫 번째 섹션에 표시됩니다. 기본값은 false이며 선택 사항입니다.
section_autoheight - (boolean) 셀 높이 자동 조정 활성화 여부입니다. 기본값은 true입니다.
dy - (number) 최소 셀 높이입니다. section_autoheight가 false일 때 셀 높이가 고정되고, true일 때는 공간에 맞게 확장됩니다. 기본값은 50입니다.
dx - (number) 섹션 이름을 표시하는 열의 너비입니다. 기본값은 200입니다.
event_dy - (number/string) 이벤트 높이입니다. 'full'로 설정하면 셀 전체를 채웁니다. 기본값은 scheduler.xy.bar_height-5입니다.
event_min_dy - (number) 이벤트 최소 높이입니다. 기본값은 scheduler.xy.bar_height-5입니다.
resize_events - (boolean) 개별 이벤트 높이를 한 이벤트 높이 내에서 축소할 수 있는지 여부입니다 (event_min_dy 이하로 줄어들지 않음). 기본값은 true입니다.
fit_events - (boolean) 섹션 높이를 모든 이벤트가 들어가도록 확장할지 아니면 고정(dy)할지 결정합니다. 3.0 버전부터 사용 가능하며, 기본값은 true입니다.
fit_events_offset - (number) fit_events가 true일 때, 마지막 이벤트 아래에 추가되는 여백(픽셀)입니다.
round_position - (boolean) 이벤트 길이와 상관없이 셀 전체 너비로 이벤트를 늘립니다. 기본값은 false이며, 'Bar' 및 'Tree' 모드에만 적용됩니다.
folder_events_available - (boolean) 이벤트를 개별 홀더뿐 아니라 전체 폴더(모든 레벨)에 할당할 수 있게 합니다. 'Tree' 모드에서만 사용하며 기본값은 false입니다.
folder_dy - (number) 폴더(자식 섹션을 포함하는 섹션)의 높이(픽셀)입니다. 'Tree' 모드에서만 사용됩니다.
second_scale - (object) 기본 X축 위에 두 번째 X축을 추가하여 시간 구간을 그룹화합니다. 선택 사항이며 3.0 버전부터 사용 가능합니다.
이 객체는 다음을 포함합니다:
- x_unit - (minute, hour, day, week, month, year) 측정 단위로 기본값은 'minute'입니다.
- x_date - (string) 날짜 형식(날짜 형식 지정 참고). 설정하지 않으면 hour_date 형식을 사용합니다.
scrollable - (boolean) Timeline 뷰의 가로 스크롤 활성화 여부입니다. 기본값은 false입니다. false 또는 undefined일 경우, 날짜 열은 뷰포트 너비에 맞게 축소됩니다. true일 경우, 열 너비가 column_width 이하로 줄어들지 않으며 필요 시 가로 스크롤바가 표시됩니다.
column_width - (number) 타임라인 날짜 열의 최소 너비로 기본값은 100입니다.
scroll_position - (Date) 렌더링 후 타임라인을 특정 날짜로 스크롤합니다. timeline.scrollTo()와 동일한 인자를 받습니다.
autoscroll - (object) 자동 스크롤 민감도 및 속도를 설정하는 객체로 다음 속성을 가집니다:
- range_x - (number) 데이터 영역 가장자리에서 수평 자동 스크롤 거리
- range_y - (number) 데이터 영역 가장자리에서 수직 자동 스크롤 거리
- speed_x - (number) 수평 자동 스크롤 속도
- speed_y - (number) 수직 자동 스크롤 속도
cell_template - (boolean) 타임라인 셀에 사용자 정의 템플릿 렌더링 활성화 여부
smart_rendering - (boolean) 보이는 행, 열, 이벤트만 렌더링하고 스크롤 시 나머지를 로드하는 스마트 렌더링을 활성화합니다. 스크롤 가능한 타임라인에 기본 활성화되어 있습니다.
columns- (array) 좌측 패널에 표시할 열을 지정합니다. 지정하지 않으면 timeline_scale_label 템플릿이 사용됩니다.

속성 동적 변경

모든 타임라인 뷰는 scheduler.matrix에 저장됩니다. 이름으로 타임라인 뷰 설정에 접근하고 수정할 수 있습니다. 변경 사항은 스케줄러를 다시 그린 후 적용됩니다:

scheduler.getView('timeline').x_size = 12;
scheduler.setCurrentView(); // 스케줄러 다시 그리기

여기서 "timeline"은 createTimelineView 메서드에서 타임라인 뷰에 할당한 이름입니다:

scheduler.createTimelineView({
    name:"timeline",
    ...
});

맨 위로