AgendaView

AgendaView

지정된 기간의 이벤트를 날짜별로 그룹화해 세로 목록으로 표시하는 뷰 컴포넌트예요. @mantine/schedule 패키지의 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

AgendaView는 지정된 기간의 이벤트를 세로 목록으로 렌더링해요. 이벤트는 날짜별로 그룹화되어 각 그룹에 날짜 헤더와 함께 시간순으로 표시돼요.

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';

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

const events = [
  {
    id: 'team-meeting',
    title: 'Team Meeting',
    start: `${startOfMonth} 09:00:00`,
    end: `${startOfMonth} 10:30:00`,
    color: 'blue',
  },
  {
    id: 'client-call',
    title: 'Client Call',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'green',
  },
  {
    id: 'weekly-review-series',
    title: 'Weekly review',
    start: `${startOfMonth} 16:00:00`,
    end: `${startOfMonth} 17:00:00`,
    color: 'cyan',
    recurrence: {
      rrule: 'FREQ=WEEKLY;COUNT=8',
    },
  },
];

종일 및 다중일 이벤트 (All-day and multi-day events)

시간이 있는 이벤트는 시간 범위를 보여주고, 종일(All day) 이벤트는 "All day" 라벨을 표시하며, 여러 날에 걸친 이벤트는 각 날짜에 나타나요.

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';

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

const events = [
  {
    id: 'timed',
    title: 'Team Meeting',
    start: `${today} 10:00:00`,
    end: `${today} 11:30:00`,
    color: 'blue',
  },
  {
    id: 'allday',
    title: 'Company Holiday',
    start: dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00'),
    end: dayjs().add(2, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
  {
    id: 'multiday',
    title: 'Sales Conference',
    start: dayjs().add(2, 'day').format('YYYY-MM-DD 00:00:00'),
    end: dayjs().add(5, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'grape',
  },
  {
    id: 'timed-2',
    title: 'Client Call',
    start: dayjs().add(3, 'day').format('YYYY-MM-DD 14:00:00'),
    end: dayjs().add(3, 'day').format('YYYY-MM-DD 15:00:00'),
    color: 'green',
  },
  {
    id: 'evening',
    title: 'Dinner Event',
    start: dayjs().add(4, 'day').format('YYYY-MM-DD 19:00:00'),
    end: dayjs().add(4, 'day').format('YYYY-MM-DD 21:00:00'),
    color: 'orange',
  },
];

날짜 형식 (Date formats)

헤더의 범위 라벨은 headerFormat으로, 개별 날짜 그룹 헤더는 dateHeaderFormat으로 제어해요. 둘 다 dayjs 형식 문자열이나 콜백 함수를 받아요.

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';

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

const events = [
  {
    id: 'standup',
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 'meeting',
    title: 'Team Meeting',
    start: dayjs().add(1, 'day').format('YYYY-MM-DD 10:00:00'),
    end: dayjs().add(1, 'day').format('YYYY-MM-DD 11:30:00'),
    color: 'green',
  },
  {
    id: 'review',
    title: 'Code Review',
    start: dayjs().add(2, 'day').format('YYYY-MM-DD 14:00:00'),
    end: dayjs().add(2, 'day').format('YYYY-MM-DD 15:00:00'),
    color: 'violet',
  },
];

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

renderEvent를 사용하면 각 이벤트 행을 완전히 커스터마이즈할 수 있어요. 콜백은 이벤트 데이터와 래퍼 엘리먼트에 펼쳐야 하는 기본 루트 props를 받아요.

import dayjs from 'dayjs';
import { Badge, Box, Group, Text, UnstyledButton } from '@mantine/core';
import { AgendaView, ScheduleEventData } from '@mantine/schedule';

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

const events: ScheduleEventData[] = [
  {
    id: 'standup',
    title: 'Team Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
    payload: { location: 'Room A', category: 'meeting' },
  },
  {
    id: 'workshop',
    title: 'Design Workshop',
    start: `${today} 10:00:00`,
    end: `${today} 12:00:00`,
    color: 'grape',
    payload: { location: 'Creative Space', category: 'workshop' },
  },
];

이벤트 클릭 (Event click)

onEventClick으로 이벤트 상호작용을 처리할 수 있어요. 아래 예시는 이벤트를 클릭하면 이벤트 세부 정보가 담긴 모달을 여는 예시예요.

import dayjs from 'dayjs';
import { useState } from 'react';
import { Modal, Stack, Text } from '@mantine/core';
import { AgendaView, ScheduleEventData } from '@mantine/schedule';

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

const events: ScheduleEventData[] = [
  {
    id: 'standup',
    title: 'Team Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
    payload: { description: 'Daily team sync', location: 'Room A' },
  },
];

function Demo() {
  const [selected, setSelected] = useState<ScheduleEventData | null>(null);

  return (
    <>
       setSelected(event)}
      />

       setSelected(null)}
        title={selected?.title}
      >
        ...
  );
}

지역화 (Localization)

locale을 설정하면 날짜 헤더를 번역하고, labels를 전달하면 "All day"나 "No events" 같은 내장 문자열을 재정의할 수 있어요.

import 'dayjs/locale/es';

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';

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

const events = [
  {
    id: 'standup',
    title: 'Reunión diaria',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
];

정적 모드 (Static mode)

mode="static"으로 설정하면 모든 이벤트 상호작용을 비활성화할 수 있어요. 정적 모드에서는 이벤트를 클릭할 수 없어요.

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';
import { events } from './data';

더 알아보기 (Learn more)

• MobileMonthView
• ResourcesDayView