How to link fullcalendar and google api in react js - reactjs

Question

I want to bring a customized full calnedar and connect it with Google canlander api, but I don't know because it's customized Help me
The full calendar site says we can apply the code below, but I don't know where to put the code.
let calendar = new Calendar(calendarEl, {
plugins: [ googleCalendarPlugin ],
googleCalendarApiKey: '<YOUR API KEY>',
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
className: 'gcal-event' // an option!
}
});
Below is my current code.
import React, { useState, useRef } from "react";
import "./style.module.css";
import FullCalendar from "#fullcalendar/react";
import timeGridPlugin from "#fullcalendar/timegrid";
import dayGridPlugin from "#fullcalendar/daygrid";
import interactionPlugin from "#fullcalendar/interaction";
import { nanoid } from "nanoid";
import {
Row,
Col,
Button,
FormGroup,
Label,
Input,
Container
} from "reactstrap";
import Select from "react-select";
import DateRangePicker from "react-bootstrap-daterangepicker";
import googleCalendarPlugin from "#fullcalendar/google-calendar"; //google calendar api
import "./custom.module.css";
import events from "./events";
import CustomModal from "../Components/CustomModal";
let todayStr = new Date().toISOString().replace(/T.*$/, "");
export default function Calendar() {
const [weekendsVisible, setWeekendsVisible] = useState(true);
const [currentEvents, setCurrentEvents] = useState([]);
const [modal, setModal] = useState(false);
const [confirmModal, setConfirmModal] = useState(false);
const calendarRef = useRef(null);
const [title, setTitle] = useState("");
const [start, setStart] = useState(new Date());
const [end, setEnd] = useState(new Date());
const handleCloseModal = () => {
handleClose();
setModal(false);
};
function handleDateClick(arg) {
};
function handleDateSelect(selectInfo) {
if (
selectInfo.view.type === "timeGridWeek" ||
selectInfo.view.type === "timeGridDay"
) {
selectInfo.view.calendar.unselect();
setState({ selectInfo, state: "create" });
// Open modal create
console.log("open modal create");
// console.log(selectInfo);
setStart(selectInfo.start);
setEnd(selectInfo.end);
setModal(true);
}
}
function renderEventContent(eventInfo) {
return (
<div>
<i
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}}
>
{eventInfo.event.title}
</i>
</div>
);
}
function handleEventClick(clickInfo) {
setState({ clickInfo, state: "update" });
setTitle(clickInfo.event.title);
setStart(clickInfo.event.start);
setEnd(clickInfo.event.end);
setModal(true);
}
function handleEvents(events) {
setCurrentEvents(events);
}
function handleEventDrop(checkInfo) {
setState({ checkInfo, state: "drop" });
setConfirmModal(true);
}
function handleEventResize(checkInfo) {
setState({ checkInfo, state: "resize" });
setConfirmModal(true);
}
function handleEdit() {
state.clickInfo.event.setStart(start);
state.clickInfo.event.setEnd(end);
state.clickInfo.event.mutate({
standardProps: { title }
});
handleClose();
}
function handleSubmit() {
const newEvent = {
id: nanoid(),
title,
start: state.selectInfo?.startStr || start.toISOString(),
end: state.selectInfo?.endStr || end.toISOString(),
allDay: state.selectInfo?.allDay || false
};
calendarApi.addEvent(newEvent);
handleClose();
}
function handleDelete() {
state.clickInfo.event.remove();
handleClose();
}
function handleClose() {
setTitle("");
setStart(new Date());
setEnd(new Date());
setState({});
setModal(false);
}
const [state, setState] = useState({});
const [departments, setDepartments] = useState([
{ value: "1", label: "All" },
{ value: "2", label: "BPA Technical" },
{ value: "3", label: "Aqua 2 Cleaning" }
]);
function onFilter(element) {
console.log(element.value);
}
return (
<div className="App">
<Container>
<Row style={{ marginTop: 150 }}>
<h1 style={{color:'white', textAlign:'center', marginBottom:50}}>Make a Booking</h1>
</Row>
<Row>
<Col md={12}>
<FullCalendar
ref={calendarRef}
plugins={[dayGridPlugin,timeGridPlugin, interactionPlugin]}
headerToolbar={{
left: "prev,today,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay"
}}
buttonText={{
today: "Today's Time Table",
month: "month",
week: "week",
day: "day",
list: "list"
}}
initialView="timeGridWeek"
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
weekends={weekendsVisible}
//
initialEvents={[
{
},
{
id: nanoid(),
title: "All-day event",
start: todayStr
},
{
id: nanoid(),
title: "Timed event",
start: todayStr + "T12:00:00",
end: todayStr + "T12:30:00"
}
]}
select={handleDateSelect}
eventContent={renderEventContent} // custom render function
eventClick={handleEventClick}
eventsSet={() => handleEvents(events)}
eventDrop={handleEventDrop}
eventResize={handleEventResize}
//
dateClick={handleDateClick}
eventAdd={(e) => {
console.log("eventAdd", e);
}}
eventChange={(e) => {
console.log("eventChange", e);
}}
eventRemove={(e) => {
console.log("eventRemove", e);
}}
/>
</Col>
</Row>
</Container>
<CustomModal
title={state.state === "update" ? "Update Booking" : "Make a Booking"}
isOpen={modal}
toggle={handleCloseModal}
onCancel={handleCloseModal}
onSubmit={state.clickInfo ? handleEdit : handleSubmit}
submitText={state.clickInfo ? "Update" : "Save"}
onDelete={state.clickInfo && handleDelete}
deleteText="Delete"
>
<FormGroup>
<Label for="#gmail.com">Trainer</Label>
<br/>
<select className="form-control" name="title"
value={title} onChange={(e) => setTitle(e.target.value)}>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</FormGroup>
<FormGroup>
<Label for="#gmail.com">Start Time - End Time</Label>
<DateRangePicker
initialSettings={{
locale: {
format: "M/DD hh:mm A"
},
startDate: start,
endDate: end,
timePicker: true
}}
onApply={(event, picker) => {
setStart(new Date(picker.startDate));
setEnd(new Date(picker.endDate));
}}
>
<input className="form-control" type="text" />
</DateRangePicker>
</FormGroup>
</CustomModal>
<CustomModal
title={state.state === "resize" ? "Resize Event" : "Drop Event"}
isOpen={confirmModal}
toggle={() => {
state.checkInfo.revert();
setConfirmModal(false);
}}
onCancel={() => {
state.checkInfo.revert();
setConfirmModal(false);
}}
cancelText="Cancel"
onSubmit={() => setConfirmModal(false)}
submitText={"OK"}
>
Do you want to {state.state} this event?
</CustomModal>
</div>
);
}
I tried to apply the code below to my code by applying calendar id and api key on Google, but I don't know.
let calendar = new Calendar(calendarEl, {
plugins: [ googleCalendarPlugin ],
googleCalendarApiKey: '<YOUR API KEY>',
events: {
googleCalendarId: 'abcd1234#group.calendar.google.com',
className: 'gcal-event' // an option!
}
});