React FullCalendar のサンプルプログラムです。
React版だと、一気に使いやすくなりますね!
社内でも大好評でした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
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(){}} /> </> ) } |
React との相性は抜群ですね!
公式サイト
React Component - Docs
| FullCalendar
FullCalendar seamlessly integrates with the React JavaScript framework. It provides a component that exactly matches the...