ResourcesWeekView

ResourcesWeekView

리소스 간 일정 관리를 위해 리소스 행을 사용하는 주별 뷰 컴포넌트예요. @mantine/schedule 패키지의 컴포넌트예요. 리소스를 행으로, 전체 주의 타임 슬롯을 열로 표시하며 요일 이름과 시간 라벨을 보여주는 2단계 헤더를 제공해요.

출처: 문서

본문

사용법 (Usage)

ResourcesWeekView는 리소스를 행으로, 전체 주의 타임 슬롯을 열로 표시하며 요일 이름과 시간 라벨을 보여주는 2단계 헤더를 제공해요. 각 행은 리소스(예: 회의실, 사람, 장비)를 나타내며, 이벤트 데이터의 resourceId 속성을 통해 해당 리소스에 할당된 이벤트를 보여줘요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
    />
  );
}

종일 이벤트 (All-day events)

하루 전체에 걸친 이벤트(00:00:00에 시작해 다음 날 00:00:00에 끝나는)는 해당 요일 열 안의 전체 너비 바 형태로 렌더링돼요. 전경(foreground) 종일 이벤트는 열의 맨 위에 고정되고 여러 개가 있으면 쌓여요. display: 'background'인 종일 이벤트는 해당 요일 열 전체를 색으로 표시해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

상호작용 가능한 배경 이벤트 (Interactive background events)

withInteractiveBackgroundEvents prop으로 배경 이벤트를 클릭 가능하게 만들 수 있어요. 배경 이벤트를 클릭하면 일반 이벤트와 마찬가지로 onEventClick이 이벤트 객체로 호출돼요. 핸들러에서 event.display === 'background'로 구분해요.

상호작용 가능한 배경 이벤트는 그 아래의 타임 슬롯을 덮는다는 점에 주의하세요. 그 범위의 클릭과 드래그 선택은 그리드 대신 이벤트로 전달돼요. 상호작용 가능한 배경 이벤트는 여전히 드래그할 수 없어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { Text } from '@mantine/core';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [clicked, setClicked] = useState<ScheduleEventData | null>(null);

  return (
    <>
      <Text>
        Last clicked:{' '}
        {clicked
          ? `${clicked.title} (${clicked.display === 'background' ? 'background' : 'regular'} event)`
          : 'nothing yet'}
      </Text>
      <ResourcesWeekView
        date={date}
        onDateChange={setDate}
        events={events}
        resources={resources}
        onEventClick={setClicked}
        withInteractiveBackgroundEvents
      />
    </>
  );
}

리사이즈 가능한 배경 이벤트 (Resizable background events)

withEventResize를 withInteractiveBackgroundEvents와 함께 설정하면 배경 이벤트가 시작·종료 가장자리에 리사이즈 핸들을 렌더링해요. 핸들을 끌면 일반 이벤트와 마찬가지로 onEventResize가 배경 이벤트로 호출돼요. 핸들러에서 event.display === 'background'로 구분해요.

종일 배경 이벤트는 절대 리사이즈할 수 없어요. 배경 이벤트를 고정하고 일반 이벤트만 리사이즈 가능하게 하려면 canResizeEvent에서 false를 반환해요:

<ResourcesWeekView
  events={events}
  resources={resources}
  withEventResize
  withInteractiveBackgroundEvents
  canResizeEvent={(event) => event.display !== 'background'}
/>

드래그 앤 드롭 (Drag and drop)

withEventsDragAndDrop prop으로 리소스 간 드래그 앤 드롭을 활성화해요. onEventDrop 콜백은 다섯 번째 인자로 대상 resourceId를 받아 이벤트의 리소스 할당을 갱신할 수 있게 해줘요. 이벤트는 리소스와 날짜 모두를 가로질러 드래그할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      withEventsDragAndDrop
      onEventDrop={({ eventId, newStart, newEnd, resourceId }) => {
        setEvents((current) =>
          current.map((event) =>
            event.id === eventId
              ? { ...event, start: newStart, end: newEnd, resourceId }
              : event
          )
        );
      }}
    />
  );
}

드래그 간격 (Drag interval)

기본적으로 이벤트는 드래그 앤 드롭으로 이동할 때 intervalMinutes에 스냅돼요. 드래그에 다른 스냅 단계를 사용하려면 eventDragInterval을 설정해요. 예를 들어 30분 슬롯 그리드에서 이벤트를 15분 단위로 이동할 수 있게 해요. 고스트 미리보기가 이벤트가 위치할 곳을 보여줘요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      intervalMinutes={30}
      eventDragInterval={15}
      withEventsDragAndDrop
      onEventDrop={({ eventId, newStart, newEnd, resourceId }) => {
        setEvents((current) =>
          current.map((event) =>
            event.id === eventId
              ? { ...event, start: newStart, end: newEnd, resourceId }
              : event
          )
        );
      }}
    />
  );
}

이벤트 폼 (Event form)

타임 슬롯을 클릭하거나 드래그해 범위를 선택하면 새 이벤트를 만들 수 있어요. 기존 이벤트를 클릭하면 편집할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { Select } from '@mantine/core';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { EventData, EventForm } from './EventForm';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);
  const [formOpened, setFormOpened] = useState(false);
  const [selectedEventData, setSelectedEventData] = useState(null);
  const [selectedResourceId, setSelectedResourceId] = useState(null);

  const handleTimeSlotClick = ({
    slotStart,
    slotEnd,
    resourceId,
  }: {
    slotStart: string;
    slotEnd: string;
    nativeEvent: React.MouseEvent;
    resourceId?: string | number;
  }) => {
    setSelectedResourceId(resourceId ? String(resourceId) : null);
    setSelectedEventData({
      title: '',
      start: new Date(slotStart),
      end: new Date(slotEnd),
      color: 'blue',
    });
    setFormOpened(true);
  };

  const handleEventClick = (event: ScheduleEventData) => {
    setSelectedResourceId(event.resourceId ? String(event.resourceId) : null);
    setSelectedEventData({
      id: event.id,
      title: event.title,
      start: new Date(event.start),
      end: new Date(event.end),
      color: event.color || 'blue',
    });
    setFormOpened(true);
  };

  const handleSlotDragEnd = ({
    rangeStart,
    rangeEnd,
    resourceId,
  }: {
    rangeStart: string;
    rangeEnd: string;
    resourceId?: string | number;
  }) => {
    setSelectedResourceId(resourceId ? String(resourceId) : null);
    setSelectedEventData({
      title: '',
      start: new Date(rangeStart),
      end: new Date(rangeEnd),
      color: 'blue',
    });
    setFormOpened(true);
  };

  const handleSubmit = (values: EventData) => {
    if (values.id) {
      setEvents((prev) =>
        prev.map((event) =>
          event.id === values.id
            ? {
                ...event,
                title: values.title,
                start: dayjs(values.start).toISOString(),
                end: dayjs(values.end).toISOString(),
                color: values.color || 'blue',
                resourceId: selectedResourceId || event.resourceId,
              }
            : event
        )
      );
    } else {
      setEvents((prev) => [
        ...prev,
        {
          id: Math.random().toString(36).substring(2, 11),
          title: values.title,
          start: dayjs(values.start).toISOString(),
          end: dayjs(values.end).toISOString(),
          color: values.color || 'blue',
          resourceId: selectedResourceId || undefined,
        },
      ]);
    }
  };

  const handleDeleteEvent = () => {
    if (selectedEventData?.id) {
      setEvents((prev) => prev.filter((e) => e.id !== selectedEventData.id));
    }
  };

  return (
    <>
      <ResourcesWeekView
        date={date}
        onDateChange={setDate}
        events={events}
        resources={resources}
        onTimeSlotClick={handleTimeSlotClick}
        onEventClick={handleEventClick}
        onSlotDragEnd={handleSlotDragEnd}
        withDragSlotSelect
      />
      <EventForm
        setFormOpened={setFormOpened}
        onExitTransitionEnd={() => setSelectedEventData(null)}
        values={selectedEventData}
        onSubmit={handleSubmit}
        onDelete={selectedEventData?.id ? handleDeleteEvent : undefined}
      >
        <Select
          data={resources.map((r) => ({ value: String(r.id), label: r.label }))}
          value={selectedResourceId}
          onChange={setSelectedResourceId}
        />
      </EventForm>
    </>
  );
}

시간 범위와 간격 (Time range and intervals)

startTime, endTime, intervalMinutes props로 표시할 시간 범위와 슬롯 세밀도를 제어할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

다중 시간 간격 (Multi-hour intervals)

intervalMinutes는 시간에 균등하게 나누어지는 값(예: 15 또는 30) 또는 정수 시간(예: 120 또는 240)을 받아요. 다중 시간 간격은 각각 여러 시간을 포괄하는 더 넓은 열을 렌더링하며, 긴 시간 범위를 압축적으로 표시할 때 유용해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { SegmentedControl, Stack } from '@mantine/core';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [intervalMinutes, setIntervalMinutes] = useState('120');

  return (
    <Stack>
      <SegmentedControl
        value={intervalMinutes}
        onChange={setIntervalMinutes}
        data={[
          { value: '60', label: '1 hour' },
          { value: '120', label: '2 hours' },
          { value: '240', label: '4 hours' },
        ]}
      />
      <ResourcesWeekView
        date={date}
        onDateChange={setDate}
        events={events}
        resources={resources}
        intervalMinutes={Number(intervalMinutes)}
      />
    </Stack>
  );
}

현재 시간 표시기 (Current time indicator)

withCurrentTimeIndicator로 현재 시간에 선을 표시할 수 있어요. withCurrentTimeBubble={false}로 시간 버블 라벨을 숨길 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      withCurrentTimeIndicator
      withCurrentTimeBubble
    />
  );
}

다른 시간대의 현재 시간 표시기 (Current time indicator in a different timezone)

@mantine/schedule은 시간대에 구애받지 않는 YYYY-MM-DD HH:mm:ss 문자열과 함께 동작하며 자체적으로 시간대 변환을 수행하지 않아요. 기본적으로 현재 시간 표시기는 사용자의 로컬 시간을 기준으로 배치돼요.

다른 시간대에 표시기를 표시하려면 getCurrentTime prop을 사용해요. 이 prop은 현재 시간을 반환하는 함수이며 매 틱(tick)마다 호출되므로 표시기가 자동으로 계속 갱신돼요.

import { useState } from 'react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { Select, Stack } from '@mantine/core';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

dayjs.extend(utc);
dayjs.extend(timezone);

const timezones = ['UTC', 'America/New_York', 'Europe/Berlin', 'Asia/Kolkata', 'Asia/Tokyo'];

function Demo() {
  const [tz, setTz] = useState('UTC');

  // getCurrentTime is called on every tick, so the indicator keeps updating
  const getCurrentTime = () => dayjs().tz(tz).format('YYYY-MM-DD HH:mm:ss');
  const currentDate = getCurrentTime().split(' ')[0];

  return (
    <Stack>
       setTz(value!)}
        allowDeselect={false}
      />
      <ResourcesWeekView
        events={events}
        resources={resources}
        getCurrentTime={getCurrentTime}
        date={currentDate}
      />
    </Stack>
  );
}

주의 첫 요일 (First day of week)

firstDayOfWeek로 주가 시작하는 요일을 제어해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

커스텀 주 라벨 (Custom week label)

renderWeekLabel로 헤더의 주 라벨을 완전히 커스터마이즈할 수 있어요. 이 prop을 제공하면 라벨을 완전히 제어해요. 날짜 형식만 바꾸려면 weekLabelFormat을 사용하면 돼요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      renderWeekLabel={({ weekStart, weekEnd }) =>
        `Week of ${dayjs(weekStart).format('MMM D')} – ${dayjs(weekEnd).format('MMM D, YYYY')}`
      }
    />
  );
}

영업 시간 (Business hours)

highlightBusinessHours prop으로 모든 타임 슬롯 열에서 영업 시간과 비영업 시간을 시각적으로 구분할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      highlightBusinessHours
      businessHours={['09:00:00', '17:00:00']}
    />
  );
}

주말 없이 (Without weekend days)

withWeekendDays={false}로 주말 열을 숨길 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

커스텀 리소스 라벨 (Custom resource label)

renderResourceLabel prop으로 왼쪽 열의 리소스 라벨 렌더링을 커스터마이즈할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { Stack, Text } from '@mantine/core';
import { ResourcesWeekView, ScheduleResourceData } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      renderResourceLabel={(resource: ScheduleResourceData) => (
        <Stack gap={0}>
          <Text fw={500}>{resource.label}</Text>
          <Text size="xs">Office</Text>
        </Stack>
      )}
    />
  );
}

리소스 그룹 (Resource groups)

groups prop으로 리소스를 라벨이 있는 헤더 아래에 그룹화할 수 있어요. 그룹 라벨은 리소스 라벨 왼쪽에 열로 표시되며 리소스에 걸쳐 세로로 펼쳐져요. renderGroupLabel로 그룹 라벨 렌더링을, groupLabelWidth로 그룹 열 너비를 커스터마이즈해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleResourceGroup } from '@mantine/schedule';
import { events } from './data';

const resources = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
  { id: 'new-york', label: 'Meeting room: New York' },
  { id: 'london', label: 'Meeting room: London' },
  { id: 'overflow', label: 'Overflow room' },
];

const groups: ScheduleResourceGroup[] = [
  { label: 'Floor 1', resourceIds: ['tokyo', 'paris'] },
  { label: 'Floor 2', resourceIds: ['new-york', 'london'] },
];

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      groups={groups}
    />
  );
}

커스텀 이벤트 렌더링 (Custom event rendering)

renderEvent prop으로 이벤트 렌더링을 완전히 커스터마이즈할 수 있어요. 이 함수는 첫 번째 인자로 이벤트 데이터를, 두 번째 인자로 이벤트 루트 엘리먼트에 전달될 모든 props(children 포함)를 받아요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { HoverCard, UnstyledButton } from '@mantine/core';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { EventDetails } from './EventDetails';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      onEventDrop={({ eventId, newStart, newEnd, resourceId }) => {
        setEvents((current) =>
          current.map((event) =>
            event.id === eventId
              ? { ...event, start: newStart, end: newEnd, resourceId }
              : event
          )
        );
      }}
      renderEvent={(event, props) => (
        <HoverCard>
          <HoverCard.Target>
            <UnstyledButton {...props}>{event.title}</UnstyledButton>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <EventDetails event={event} />
          </HoverCard.Dropdown>
        </HoverCard>
      )}
    />
  );
}

반복 이벤트 (Recurring events)

ResourcesWeekView는 표시된 주에 대해 반복 이벤트를 자동으로 확장해요. 전체 문서는 반복 이벤트 가이드를 참고해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');

const resources = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
];

const events = [
  {
    id: 'daily-sync-series',
    title: 'Daily sync (series)',
    start: `${dayjs(today).subtract(1, 'day').format('YYYY-MM-DD')} 09:00:00`,
    end: `${dayjs(today).subtract(1, 'day').format('YYYY-MM-DD')} 09:30:00`,
    color: 'blue',
    resourceId: 'tokyo',
    recurrence: {
      rrule: 'FREQ=DAILY;COUNT=10',
      exdate: [`${today} 09:00:00`],
    },
  },
];

function Demo() {
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
    />
  );
}

타임 슬롯당 최대 이벤트 수 (Max events per time slot)

maxEventsPerTimeSlot prop으로 타임 슬롯당 표시되는 겹치는 이벤트 수를 제한할 수 있어요. 제한을 초과하면 "+N more" 표시기가 표시돼요. 표시기를 클릭하면 그룹의 모든 이벤트가 담긴 팝오버가 열려요. moreEventsProps로 팝오버 동작을 커스터마이즈할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleEventData, ScheduleResourceData } from '@mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');

const resources: ScheduleResourceData[] = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
];

const events: ScheduleEventData[] = [
  // ... many overlapping events per resource
];

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      maxEventsPerTimeSlot={2}
    />
  );
}

지역화 (Localization)

locale prop으로 날짜 형식 로케일을, labels prop으로 내장 라벨을 재정의할 수 있어요.

import 'dayjs/locale/es';

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

반경 (Radius)

radius prop으로 이벤트의 테두리 반경을 커스터마이즈할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

시작 스크롤 날짜시간 (Start scroll date time)

startScrollDateTime prop으로 마운트 시 특정 시간으로 스크롤할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      startScrollDateTime={`${today} 08:00:00`}
    />
  );
}

스크롤 영역 props (Scroll area props)

scrollAreaProps로 스크롤 영역 동작을 커스터마이즈할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

이벤트 리사이즈 (Event resize)

withEventResize prop으로 이벤트 리사이즈를 활성화해요. 이벤트는 시작이나 종료 가장자리를 끌어 리사이즈할 수 있으며, onEventResize 콜백이 갱신된 시작·종료 날짜로 호출돼요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      withEventResize
      onEventResize={({ eventId, newStart, newEnd }) => {
        setEvents((current) =>
          current.map((event) =>
            event.id === eventId
              ? { ...event, start: newStart, end: newEnd }
              : event
          )
        );
      }}
    />
  );
}

리사이즈 간격 (Resize interval)

기본적으로 이벤트는 리사이즈할 때 intervalMinutes에 스냅돼요. eventResizeInterval로 다른 스냅 단계를 설정할 수 있어요. 예를 들어 30분 슬롯 그리드에서 이벤트를 15분 단위로 리사이즈할 수 있어요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView, ScheduleEventData } from '@mantine/schedule';
import { events as initialEvents, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);
  const [events, setEvents] = useState(initialEvents);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      intervalMinutes={30}
      eventResizeInterval={15}
      withEventResize
      onEventResize={({ eventId, newStart, newEnd }) => {
        setEvents((current) =>
          current.map((event) =>
            event.id === eventId
              ? { ...event, start: newStart, end: newEnd }
              : event
          )
        );
      }}
    />
  );
}

정적 모드 (Static mode)

mode="static"으로 설정하면 모든 상호작용을 비활성화해요. 표시 전용 뷰에 유용해요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

function Demo() {
  const today = dayjs().format('YYYY-MM-DD');
  const [date, setDate] = useState(today);

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      events={events}
      resources={resources}
      mode="static"
    />
  );
}

더 알아보기 (Learn more)

• ResourcesSchedule
• ResourcesMonthView