React | FullCalendarの利用方法 | 修ちゃんの技術資料

FullCalendarにも、Reactに対応しています。
簡単に利用できるので、機会があれば利用してみてはいかがでしょうか？

インストール
サンプル
公式サイト

インストール

npm install --save \
  @fullcalendar/core \
  @fullcalendar/react \
  @fullcalendar/daygrid

npm install --save \

@fullcalendar/core \

@fullcalendar/react \

@fullcalendar/daygrid

サンプル

シンプル版

import React from 'react'
import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default class DemoApp extends React.Component {
  render() {
    return (
      <FullCalendar
        plugins={[ dayGridPlugin ]}
        initialView="dayGridMonth"
      />
    )
  }
}

import React from 'react'

import FullCalendar from '@fullcalendar/react' // must go before plugins

import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default class DemoApp extends React.Component {

render() {

return (

<FullCalendar

plugins={[ dayGridPlugin ]}

initialView="dayGridMonth"

)

}

Props

<FullCalendar
  plugins={[ dayGridPlugin ]}
  initialView="dayGridMonth"
  weekends={false}
  events={[
    { title: 'event 1', date: '2023-03-14' },
    { title: 'event 2', date: '2023-03-03' }
  ]}
/>

<FullCalendar

plugins={[ dayGridPlugin ]}

initialView="dayGridMonth"

weekends={false}

events={[

{ title: 'event 1', date: '2023-03-14' },

{ title: 'event 2', date: '2023-03-03' }

]}

日本語表記への変更

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

function Calendar() {

  return (
    <Container>
      <Row>
        <Col>
          <p>最新情報</p>
          <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
            weekends={false}
            events={[
              { title: 'event 1', date: '2023-03-14' },
              { title: 'event 2', date: '2023-03-03' }
            ]}
            locales={[jaLocale]}         // 追加
            locale='ja'                  // 追加
          />
        </Col>
      </Row>
    </Container>
  );
}

export default Calendar;

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<Calendar />);