스크롤 동기화

사용자별 또는 회의실별 일정처럼 여러 스케줄러를 동시에 표시하는 애플리케이션에서는 각 스케줄러가 타임라인의 동일한 구간을 표시해야 하는 경우가 많습니다. scrollingPartner와 scrollingSyncDirection을 설정하면 두 스케줄러 인스턴스의 스크롤 위치를 동기화할 수 있습니다.

스크롤 동기화 활성화

scrollingPartner에 동기화할 다른 FlexScheduler 인스턴스를 지정하고, scrollingSyncDirection에서 스크롤을 동기화할 축을 설정합니다.

schedulerA.scrollingPartner = schedulerB;
schedulerA.scrollingSyncDirection = wjScheduler.ScrollingSyncDirection.Vertical;

속성을 할당하기 전에 두 스케줄러 인스턴스가 모두 생성되어 있어야 합니다. 애플리케이션에서 값을 지정하기 전까지 scrollingPartner는 null이고 scrollingSyncDirection은 None입니다. 한 인스턴스에서만 관계를 설정해도 충분하며, 어느 스케줄러를 스크롤하든 다른 인스턴스가 함께 이동합니다.

동기화 동작 방식

스케줄러는 사용자가 스크롤한 스케줄러의 스크롤 오프셋(scrollTop 및 scrollLeft)을 복사합니다. 오프셋은 픽셀 값으로 복사되므로 스케줄러가 날짜, 시간 슬롯 또는 리소스를 기준으로 위치를 맞추지는 않으며, 스크롤 위치 외의 다른 상태도 동기화되지 않습니다.

파트너를 지정해도 두 스케줄러의 스크롤 위치가 즉시 일치하는 것은 아닙니다. 두 스케줄러가 동일한 정의를 사용하면 같은 위치에서 시작하므로, 처음 스크롤할 때부터 위치가 일치합니다. 두 뷰의 위치를 처음부터 맞추려면 사용자가 스크롤하기 전에 파트너를 지정하세요.

두 스케줄러의 스크롤 위치를 일치시키려면 동일한 definition을 사용해야 합니다. 세로 스크롤은 rows.bindings를 기준으로, 가로 스크롤은 columns.bindings를 기준으로 이동하므로 두 인스턴스에서 해당 바인딩을 동일하게 유지하세요. 정의가 서로 다르면 동일한 오프셋이라도 서로 다른 날짜나 리소스를 가리킬 수 있습니다. 축 바인딩에 대한 자세한 내용은 고급 레이아웃 만들기를 참조하시기 바랍니다.

스크롤 범위가 서로 다른 경우

각 스케줄러는 자체 스크롤 범위를 유지합니다. 스크롤 범위는 활성 정의와 호스트 요소의 크기에 따라 달라지므로, 동일한 정의를 사용하더라도 두 스케줄러의 스크롤 범위가 다를 수 있습니다.

복사된 오프셋이 대상 스케줄러의 스크롤 범위를 벗어나면 대상 스케줄러는 해당 범위에서 가장 가까운 끝 위치로 이동합니다. 이후 대상 스케줄러가 새로운 위치로 스크롤하면 그 위치가 다른 인스턴스로 전달됩니다. 이로 인해 스크롤 범위가 더 큰 스케줄러가 반대 방향으로 움직일 수 있습니다.

const schedulerA = new wjScheduler.FlexScheduler('#a', { itemsSource, eventFields, displayDate });
const schedulerB = new wjScheduler.FlexScheduler('#b', { itemsSource, eventFields, displayDate });

schedulerA.scrollingPartner = schedulerB;
schedulerA.scrollingSyncDirection = wjScheduler.ScrollingSyncDirection.Vertical;

#a { height: 560px; }
#b { height: 260px; }

이 예제에서 SchedulerB는 SchedulerA보다 스크롤 범위가 300px 더 큽니다. 사용자가 SchedulerB를 끝까지 스크롤하면 SchedulerA는 자신의 스크롤 한계에서 멈추고 해당 위치를 다시 전달합니다. 그 결과 두 스케줄러 모두 스크롤 범위가 더 작은 쪽에 맞춰 멈추게 됩니다.

두 스케줄러의 정렬 상태를 유지하려면 동일한 정의를 사용하고 호스트 요소의 크기도 비슷하게 설정하세요.

동기화 일시 중지 또는 연결 해제

scrollingPartner를 지우지 않고 동기화만 일시 중지하려면 scrollingSyncDirection을 None으로 설정합니다. 관계 자체를 제거하려면 scrollingPartner를 null로 설정합니다.

// 동기화 일시 중지
schedulerA.scrollingSyncDirection = wjScheduler.ScrollingSyncDirection.None;

// 연결 관계 제거
schedulerA.scrollingPartner = null;

두 개 이상의 스케줄러 연결

각 스케줄러는 파트너를 하나만 지정할 수 있습니다. 세 개 이상의 인스턴스를 연결하려면 쌍으로 연결하고, 파트너가 있는 각 스케줄러의 scrollingSyncDirection을 설정합니다.

schedulerA.scrollingPartner = schedulerB;
schedulerA.scrollingSyncDirection = wjScheduler.ScrollingSyncDirection.Vertical;

schedulerB.scrollingPartner = schedulerC;
schedulerB.scrollingSyncDirection = wjScheduler.ScrollingSyncDirection.Vertical;

이 구성에서는 세 스케줄러가 하나의 세로 스크롤 위치를 공유합니다. 각 인스턴스는 위치를 파트너에게 전달하며, 파트너가 없는 마지막 스케줄러에서 연결이 끝납니다.