FullCalendar | React サンプルプログラム

React FullCalendar のサンプルプログラムです。
React版だと、一気に使いやすくなりますね！
社内でも大好評でした。

const Cal = () => {
    
    const [showDialog, setShowDialog] = useState(false)
    const [eventData, setEventData] = useState([])
    const [title, setTitle] = useState('')
    const [selectInfo, setSelectInfo] = useState({})
    
    useEffect(() => {
        const getEventData = () => {
            const API_URL = 'https://app.hogehoge.co.jp/schedule/events';
            axios.get(API_URL)
                .then(response => {
                    setEventData(response.data)
            })
                .catch(error => {
                console.error('エラー:', error);
            })
        }
        getEventData()
    }, [])

    const handleClickClose = () => {
        let calendarApi = selectInfo.view.calendar
        
        if (title) {
          calendarApi.addEvent({
            id: createEventId(),
            title,
            start: selectInfo.startStr,
            end: selectInfo.endStr,
            allDay: selectInfo.allDay
          })
        }
        
        setShowDialog(false)
    }
    
    const handleDateSelect = (selectInfo) => {
        let title = prompt('Please enter a new title for your event')
        let calendarApi = selectInfo.view.calendar
        
        calendarApi.unselect()
        
        if (title) {
          calendarApi.addEvent({
            id: createEventId(),
            title,
            start: selectInfo.startStr,
            end: selectInfo.endStr,
            allDay: selectInfo.allDay
          })
        }
      }
      
    return (
        <>
            { showDialog &&
                <CalDailog />
            }
            <FullCalendar
                plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
                 headerToolbar={{
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                  }}
                initialView='dayGridMonth'
                locale='ja'
                height='auto'
                firstDay={1}
                editable={true}
                selectable={true}
                selectMirror={true}
                dayMaxEvents={true}
                weekends={true}
                events={eventData}
                initialEvents={INITIAL_EVENTS}
                eventContent={renderEventContent}
                select={handleDateSelect}
                eventClick={handleEventClick}
                eventsSet={handleEvents}
                eventAdd={function(){}}
                eventChange={function(){}}
                eventRemove={function(){}}
              />
        </>
    )
}

const Cal = () => {

const [showDialog, setShowDialog] = useState(false)

const [eventData, setEventData] = useState([])

const [title, setTitle] = useState('')

const [selectInfo, setSelectInfo] = useState({})

useEffect(() => {

const getEventData = () => {

const API_URL = 'https://app.hogehoge.co.jp/schedule/events';

axios.get(API_URL)

.then(response => {

setEventData(response.data)

})

.catch(error => {

console.error('エラー:', error);

})

}

getEventData()

}, [])

const handleClickClose = () => {

let calendarApi = selectInfo.view.calendar

if (title) {

calendarApi.addEvent({

id: createEventId(),

title,

start: selectInfo.startStr,

end: selectInfo.endStr,

allDay: selectInfo.allDay

})

}

setShowDialog(false)

}

const handleDateSelect = (selectInfo) => {

let title = prompt('Please enter a new title for your event')

let calendarApi = selectInfo.view.calendar

calendarApi.unselect()

if (title) {

calendarApi.addEvent({

id: createEventId(),

title,

start: selectInfo.startStr,

end: selectInfo.endStr,

allDay: selectInfo.allDay

})

}

return (

{ showDialog &&

}

<FullCalendar

plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}

headerToolbar={{

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay'

}}

initialView='dayGridMonth'

locale='ja'

height='auto'

firstDay={1}

editable={true}

selectable={true}

selectMirror={true}

dayMaxEvents={true}

weekends={true}

events={eventData}

initialEvents={INITIAL_EVENTS}

eventContent={renderEventContent}

select={handleDateSelect}

eventClick={handleEventClick}

eventsSet={handleEvents}

eventAdd={function(){}}

eventChange={function(){}}

eventRemove={function(){}}

</>

)

}

React との相性は抜群ですね！

公式サイト

React Component - Docs | FullCalendar

FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the...

FullCalendar | React サンプルプログラム

公式サイト

おススメ商品

改訂新版これからはじめるReact実践入門　コンポーネントの基本からNext.jsによるアプリ開発まで

りあクト！ TypeScriptで始めるつらくないReact開発第5版【① 言語・環境編】: React 開発に必要な JS・TS の知識

モダンJavaScriptの基本から始める　React実践の教科書　（最新ReactHooks対応）

プロフェッショナルWebプログラミング　React

Reactハンズオンラーニング第2版 ―Webアプリケーション開発のベストプラクティス

これからはじめるReact実践入門　コンポーネントの基本からNext.jsによるアプリ開発まで

公式サイト

おススメ商品

改訂新版 これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで

りあクト！ TypeScriptで始めるつらくないReact開発 第5版【① 言語・環境編】: React 開発に必要な JS・TS の知識

モダンJavaScriptの基本から始める React実践の教科書 （最新ReactHooks対応）

プロフェッショナルWebプログラミング React

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス

これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで

改訂新版これからはじめるReact実践入門　コンポーネントの基本からNext.jsによるアプリ開発まで

りあクト！ TypeScriptで始めるつらくないReact開発第5版【① 言語・環境編】: React 開発に必要な JS・TS の知識

モダンJavaScriptの基本から始める　React実践の教科書　（最新ReactHooks対応）

プロフェッショナルWebプログラミング　React

Reactハンズオンラーニング第2版 ―Webアプリケーション開発のベストプラクティス

これからはじめるReact実践入門　コンポーネントの基本からNext.jsによるアプリ開発まで