udah dulu

components/Extras/calendar.view.js

@@ -49,6 +49,7 @@ class Calendar extends Component {
 			externalEvents: [],
 			dataLaporan: [],
 			dataEvent: [],
+			calendar: "",
 		};
 	}
 
@@ -71,8 +72,30 @@ class Calendar extends Component {
 			color = cek.penjadwalan.background_color;
 		}
 		this.setState({ externalEvents: [{ id: this.props.query.number, color: color, name: "Jadwal Pemeriksaan - BI:" + this.props.query.number }] });
+		this.renderCalendar();
 	}
 
+	renderCalendar = () => {
+		this.setState({
+			calendar: (
+				<FullCalendar
+					defaultView={this.dayGridMonth}
+					plugins={this.calendarPlugins}
+					events={this.state.dataEvent}
+					themeSystem={"bootstrap"}
+					header={this.calendarHeader}
+					editable={true}
+					droppable={true}
+					deepChangeDetection={true}
+					dateClick={this.dayClick}
+					eventReceive={this.handleEventReceive}
+					eventDrop={this.handleEventCalendar}
+					eventResize={this.handleEventCalendar}
+				></FullCalendar>
+			),
+		});
+	};
+
 	fetchData = async () => {
 		const res = await fetch("http://localhost:1880/pelaporan");
 		const data = await res.json();
@@ -298,20 +321,7 @@ class Calendar extends Component {
 							<Card className="card-default">
 								<CardBody>
 									{/* START calendar */}
-									<FullCalendar
-										defaultView={this.dayGridMonth}
-										plugins={this.calendarPlugins}
-										events={this.state.dataEvent}
-										themeSystem={"bootstrap"}
-										header={this.calendarHeader}
-										editable={true}
-										droppable={true}
-										deepChangeDetection={true}
-										dateClick={this.dayClick}
-										eventReceive={this.handleEventReceive}
-										eventDrop={this.handleEventCalendar}
-										eventResize={this.handleEventCalendar}
-									></FullCalendar>
+									{this.state.calendar}
 								</CardBody>
 							</Card>
 						</div>

package.json

@@ -17,12 +17,12 @@
         "@babel/polyfill": "7.2.5",
         "@fortawesome/fontawesome-free": "5.15.3",
         "@fullcalendar/bootstrap": "4.4.2",
-        "@fullcalendar/core": "4.4.2",
+        "@fullcalendar/core": "^4.4.2",
         "@fullcalendar/daygrid": "^4.4.2",
         "@fullcalendar/interaction": "4.4.2",
         "@fullcalendar/list": "4.4.2",
         "@fullcalendar/react": "^4.4.2",
-        "@fullcalendar/timegrid": "4.4.2",
+        "@fullcalendar/timegrid": "^4.4.2",
         "@react-google-maps/api": "1.13.0",
         "animate.css": "3.7.2",
         "bootstrap": "4.6.0",