fullcalendarお試し

react-fullcalendar-playground.tsx

import React, { FC, useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import { DateSelectArg, EventInput, EventDropArg } from '@fullcalendar/core';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import jaLocale from '@fullcalendar/core/locales/ja';

export const CalendarComponent: FC = () => {
  const [events, setEvents] = useState<EventInput[]>([]);

  const onSelect = (selection: DateSelectArg) => {
    setEvents((curr) => {
      const selectedEvent: EventInput = {
        id: crypto.randomUUID(),
        editable: true,
        start: selection.start,
        end: selection.end,
      };
      console.log(selectedEvent);

      return [...curr, selectedEvent];
    });
  };

  const onEventDop = (event: EventDropArg) => {
    console.log('eventDrop', event);
    setEvents((curr) => {
      const filteredEvents = curr.filter(e => e.id === event.oldEvent.id);
      const changedEvent: EventInput = {
        id: event.event.id,
        editable: true,
        start: event.event.start || undefined,
        end: event.event.end || undefined,
      };

      return [...filteredEvents, changedEvent];
    })
  };

  const onChangeEvent = (oldEvent, newEvent) => {};

  const formatTime = (current: Date): string => {
    return `${current.getHours()}:${current.getMinutes()}:00`;
  };

  return (
    <>
      <FullCalendar
        plugins={[
          timeGridPlugin,
          interactionPlugin,
        ]}
        events={events}
        eventDrop={onEventDop}
        eventResize={(info) => {
          console.log('eventResize', info);
        }}
        // 日付期間のセパレータ文字列
        titleRangeSeparator='〜'
        // 表示期間を週間にする
        initialView='timeGridWeek'
        // ロケール指定（日付表示のフォーマットなど）
        locale={jaLocale}
        // ヘッダーのフォーマット
        headerToolbar={{
          // 前後週ボタン + 今日ボタン
          left: 'prev,next today',
          // 表示中の週の期間
          center: 'title',
          // なし
          right: '',
        }}
        // 選択可否
        selectable={true}
        unselectAuto={false}
        // 選択範囲の可視化
        selectMirror={true}
        // 高さ
        height={'100%'}
        // 時刻のタイムゾーン
        timeZone='local'
        // 縦軸の時刻フォーマット
        slotLabelFormat={{
          hour: 'numeric',
          minute: '2-digit',
        }}
        // 選択単位（15分）
        slotDuration={{
          minutes: 15,
        }}
        // 縦軸時刻ラベルの表示期間
        slotLabelInterval={{
          hour: 1,
        }}
        // 現在時刻を示すインジケータを表示する
        nowIndicator={true}
        // 現在時刻
        now={Date.now()}
        // カレンダーを表示した際にスクロールする位置
        scrollTime={formatTime(new Date())}
        // カレンダーのページ移動時にスクロール位置をリセットしない
        scrollTimeReset={false}
        select={onSelect}
        />
      <div>
        {events.map((e, idx) => {
          return <p key={`${e.id}-${idx}`}>{e.start?.toLocaleString()}-{e.end?.toLocaleString()} {e.editable}</p>
        })}
      </div>
    </>
  );
};