[英]How to add event in fullcalendar using react?
Im trying to make a calendar with adding events dynamically, and when I add one to the state array, it doesn't update the calendar, ie it doesnt show on the calendar.我试图制作一个动态添加事件的日历,当我将一个事件添加到状态数组时,它不会更新日历,即它不会显示在日历上。 My code is following:
我的代码如下:
import React, { useState } from 'react';
import Page from '../../Components/Page/Page';
import FullCalendar from '@fullcalendar/react';
import DayGridPlugin from '@fullcalendar/daygrid';
import Modal from 'react-modal';
import Button from '../../Components/Button/Button';
import AddEventModal from './AddEventModal';
export default function () {
const [addModalOpen, setAddModalOpen] = useState(false);
const [events, setEvents] = useState([]);
const onEventAdded = (event) => {
setEvents([...events, event]);
};
return (
<Page>
<Button
className="bg-blue-500 text-white"
onClick={() => setAddModalOpen(true)}
>
New Event
</Button>
<div className="relative z-0">
<FullCalendar
plugins={[DayGridPlugin]}
events={events}
initialView="dayGridMonth"
/>
</div>
<AddEventModal
isOpen={addModalOpen}
onClose={() => setAddModalOpen(false)}
onEventAdded={(event) => onEventAdded(event)}
/>
</Page>
);
}
I needed to get a hold of calendar API.我需要掌握日历 API。
const onEventAdded = (event) => {
const api = calendarRef.current.getApi();
api.addEvent(event);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.