【カレンダー】Reactでカレンダーアプリを実装する

はじめに

標題通り、Reactでカレンダーアプリの実装を実施していきます。

ソースコード

App.tsx

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function App() {
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]}/>
    </div>
  );
}

export default App;

日本語表記に対応

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 

function App() {
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja' />
    </div>
  );
}

export default App;

App.tsx

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 
import dayjs from 'dayjs';

function App() {
  const today = new Date();
  const tomorrow = dayjs(today).add(1, 'day').toDate();
  return (
    <div>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja'
       events={[
        {title:'event1', start: '2023-02-03', end: '2023-02-03'},
        {title:'event2', start: '2023-02-04', end: '2023-02-04', color: 'red', textColor: 'black'},
        {title:'event3', start: today, end: tomorrow, color: 'white', textColor: 'green'},
      ]}
      />
    </div>
  );
}

export default App;

予定の追加

イベントの追加

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import jaLocale from '@fullcalendar/core/locales/ja'; 
import dayjs from 'dayjs';
import { useState } from 'react'

function App() {
  const today = new Date();
  const tomorrow = dayjs(today).add(1, 'day').toDate();
  const event = [
    {title:'event1', start: '2023-02-03', end: '2023-02-03'},
    {title:'event2', start: '2023-02-04', end: '2023-02-04', color: 'red', textColor: 'black'},
    {title:'event3', start: today, end: tomorrow, color: 'white', textColor: 'green'},
  ]

  const [events, setEvents] = useState(event);

  const handleEventClick = () => {
   const event =  {title:'event4', start: today, end: tomorrow, color: 'white', textColor: 'green'}
    setEvents([...events, event])
  }


  return (
    <div>
      <button onClick={handleEventClick}>test</button>
      <FullCalendar plugins={[dayGridPlugin]} locales={[jaLocale]} locale='ja'
       events={events}
        initialView="dayGridMonth"
        eventClick={handleEventClick}
      />
    </div>
  );
}

export default App;