읽기 전용 모드

캘린더를 읽기 전용으로 만들어 사용자가 내용을 수정하지 못하게 할 수 있습니다. 공개 캘린더나 조회 전용 대시보드에 유용합니다.

읽기 전용 모드는 DayFlow의 내장 편집 UI만 비활성화합니다. calendar.addEvent(), calendar.updateEvent(), calendar.deleteEvent(), calendar.applyEventsChanges() 같은 코드 기반 API는 그대로 동작합니다.

기본 사용법

읽기 전용 모드를 켜려면 캘린더 설정에 readOnly: true를 전달하세요.

const calendar = useCalendarApp({
  views: [createMonthView()],
  readOnly: true, // Disables built-in mutation UI (dragging, creating, editing)
});

세부 제어

ReadOnlyConfig 객체를 전달하면 특정 기능만 선택적으로 끌 수 있습니다:

const calendar = useCalendarApp({
  views: [createMonthView()],
  readOnly: {
    draggable: false, // Disables drag-and-drop
    viewable: true, // Allows clicking to view event details (read-only mode)
  },
});

설정 옵션

옵션타입설명
draggableboolean드래그 앤 드롭으로 이벤트를 옮기거나 크기를 조절할 수 있는지 여부입니다.
viewableboolean이벤트 상세를 볼 수 있는지 여부입니다(상세 패널·대화상자를 엽니다).

readOnly가 켜져 있으면 캘린더는 "만들기" 버튼을 비롯해 변경을 일으키는 UI 요소도 함께 숨깁니다.

직접 만든 UI

버튼, 메뉴, 대화상자를 직접 렌더링한다면 calendar.canMutateFromUI()로 편집 컨트롤을 표시할지 판단하세요:

const calendar = useCalendarApp({
  views: [createMonthView()],
  readOnly: true,
});

const canEdit = calendar.canMutateFromUI();
  • true: 직접 만든 UI에서 생성·편집·삭제 컨트롤을 보여 줘도 됩니다.
  • false: 직접 만든 UI에서 해당 컨트롤을 숨기거나 비활성화해야 합니다.