시간대

DayFlow는 TimeZone 열거형을 제공합니다. 덕분에 IANA 문자열을 외우지 않고도 앱 전역의 timeZone과 일·주 뷰에서만 쓰이는 secondaryTimeZone을 모두 설정할 수 있습니다.

시간대 모델

• timeZone: 캘린더 전체의 기본 표시·편집 시간대입니다
• secondaryTimeZone: 일 뷰와 주 뷰에서만 표시되는 보조 기준 타임라인입니다

timeZone을 바꾸면 모든 뷰가 다시 계산되어 표시됩니다. secondaryTimeZone을 바꾸면 일·주 뷰의 보조 시간 축만 달라집니다.

콜백 동작 규칙

• timeZone은 UI에서 이벤트를 표시하고 편집하는 방식을 바꿉니다.
• timeZone을 바꾸는 것만으로는 onEventUpdate, onEventDrop, onEventResize가 호출되지 않습니다.
• 업데이트 콜백은 편집이 적용된 뒤의 정규화된 이벤트를 반환합니다.
• 다시 말해, 시드니 기준으로 만든 이벤트를 상하이에서 보고 그곳에서 크기를 조절하면 편집은 상하이의 벽시계 시각으로 해석되지만, 콜백으로 전달되는 데이터는 저장하기 전에 이벤트의 정규 시간 표현으로 다시 변환됩니다.

사용법

import { TimeZone } from '@dayflow/core';
import {
  useCalendarApp,
  createDayView,
  createWeekView,
  createMonthView,
} from '@dayflow/react';

const calendar = useCalendarApp({
  timeZone: TimeZone.SHANGHAI,
  views: [
    createDayView({
      secondaryTimeZone: TimeZone.NEW_YORK,
    }),
    createWeekView({
      secondaryTimeZone: TimeZone.NEW_YORK,
    }),
    createMonthView(),
  ],
});

사용 가능한 시간대