fix kalender

components/Extras/calendar.view.js

@@ -9,11 +9,11 @@ import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import bootstrapPlugin from "@fullcalendar/bootstrap";
 
-import "@fullcalendar/core/main.css";
-import "@fullcalendar/daygrid/main.css";
-import "@fullcalendar/timegrid/main.css";
-import "@fullcalendar/list/main.css";
-import "@fullcalendar/bootstrap/main.css";
+// import "@fullcalendar/core/main.css";
+// import "@fullcalendar/daygrid/main.css";
+// import "@fullcalendar/timegrid/main.css";
+// import "@fullcalendar/list/main.css";
+// import "@fullcalendar/bootstrap/main.css";
 
 import events from "./calendar.events";
 
@@ -49,7 +49,6 @@ class Calendar extends Component {
 			externalEvents: [],
 			dataLaporan: [],
 			dataEvent: [],
-			calendar: "",
 		};
 	}
 
@@ -72,30 +71,8 @@ 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();
@@ -321,7 +298,20 @@ class Calendar extends Component {
 							<Card className="card-default">
 								<CardBody>
 									{/* START calendar */}
-									{this.state.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>
 								</CardBody>
 							</Card>
 						</div>

pages/_app.js

@@ -11,74 +11,79 @@
 
 // Polyfills
 // ======================
-import '../polyfills.js';
+import "../polyfills.js";
 
 // App
 // ======================
-import App from 'next/app';
-import React from 'react';
+import App from "next/app";
+import React from "react";
 // Redux support
-import { Provider } from 'react-redux';
-import withReduxStore from '../store/with-redux-store';
+import { Provider } from "react-redux";
+import withReduxStore from "../store/with-redux-store";
 // Translation support
-import * as Translate from '@/components/Common/Translate';
+import * as Translate from "@/components/Common/Translate";
 // Base Layout
-import Base from '@/components/Layout/Base';
+import Base from "@/components/Layout/Base";
 // import BaseHorizontal from '@/components/Layout/BaseHorizontal';
 
 // Global Vendor
 // ======================
 // Whirl
-import 'whirl/dist/whirl.css';
+import "whirl/dist/whirl.css";
 // Font Awesome
-import '@fortawesome/fontawesome-free/css/brands.css';
-import '@fortawesome/fontawesome-free/css/regular.css';
-import '@fortawesome/fontawesome-free/css/solid.css';
-import '@fortawesome/fontawesome-free/css/fontawesome.css';
+import "@fortawesome/fontawesome-free/css/brands.css";
+import "@fortawesome/fontawesome-free/css/regular.css";
+import "@fortawesome/fontawesome-free/css/solid.css";
+import "@fortawesome/fontawesome-free/css/fontawesome.css";
 // Animate.CSS
-import 'animate.css/animate.min.css';
+import "animate.css/animate.min.css";
 // Simple line icons
-import 'simple-line-icons/css/simple-line-icons.css';
+import "simple-line-icons/css/simple-line-icons.css";
 // Weather Icons
-import 'weather-icons/css/weather-icons.min.css';
-import 'weather-icons/css/weather-icons-wind.min.css';
+import "weather-icons/css/weather-icons.min.css";
+import "weather-icons/css/weather-icons-wind.min.css";
 
 // App Styes
 // ======================
-import '../styles/bootstrap.scss';
-import '../styles/app.scss';
+import "../styles/bootstrap.scss";
+import "../styles/app.scss";
 
 // https://nextjs.org/docs/#custom-app
+import "@fullcalendar/core/main.css";
+import "@fullcalendar/daygrid/main.css";
+import "@fullcalendar/timegrid/main.css";
+import "@fullcalendar/list/main.css";
+import "@fullcalendar/bootstrap/main.css";
 class MyApp extends App {
-    static async getInitialProps({ Component, ctx }) {
-        let pageProps = {};
+	static async getInitialProps({ Component, ctx }) {
+		let pageProps = {};
 
-        if (Component.getInitialProps) {
-            pageProps = await Component.getInitialProps(ctx);
-        }
+		if (Component.getInitialProps) {
+			pageProps = await Component.getInitialProps(ctx);
+		}
 
-        // Require the initial dictionary.
-        // Use require to avoid 'fs' module
-        Translate.setDict('en', require('@/public/static/locales/en/translations.json'));
-        // The store has been updated in previous call,
-        // pass it down as initial prop so client can use it.
-        return { pageProps, store: Translate.store };
-    }
+		// Require the initial dictionary.
+		// Use require to avoid 'fs' module
+		Translate.setDict("en", require("@/public/static/locales/en/translations.json"));
+		// The store has been updated in previous call,
+		// pass it down as initial prop so client can use it.
+		return { pageProps, store: Translate.store };
+	}
 
-    render() {
-        const { Component, pageProps, reduxStore, store } = this.props;
-        const Layout = Component.Layout ? Component.Layout : Base;
-        const ComponentWithTranslation = Translate.withTranslation(Component);
-        return (
-            <Provider store={reduxStore}>
-                <Translate.Provider store={store}>
-                    <Layout>
-                        <ComponentWithTranslation {...pageProps} />
-                    </Layout>
-                </Translate.Provider>
-            </Provider>
-        );
-    }
+	render() {
+		const { Component, pageProps, reduxStore, store } = this.props;
+		const Layout = Component.Layout ? Component.Layout : Base;
+		const ComponentWithTranslation = Translate.withTranslation(Component);
+		return (
+			<Provider store={reduxStore}>
+				<Translate.Provider store={store}>
+					<Layout>
+						<ComponentWithTranslation {...pageProps} />
+					</Layout>
+				</Translate.Provider>
+			</Provider>
+		);
+	}
 }
 
 export default withReduxStore(MyApp);