Jadwal pemeriksaan<->Membuat Jadwal Pemeriksaan

components/Extras/calendar.view.js

@@ -1,389 +1,389 @@
-import React, { Component } from "react";
-import ContentWrapper from "@/components/Layout/ContentWrapper";
-import { Card, CardBody, CardHeader, CardTitle, Button, Row, Col, FormGroup, Input } from "reactstrap";
-import { getPelaporan, getOneLaporan, updateLaporan } from "@/actions/pelaporan";
-import { updateJadwal } from "@/actions/penjadwalan";
-import DetailLaporan from "@/components/Main/DetailLaporan";
-import Link from "next/link";
-import FullCalendar from "@fullcalendar/react";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
-import listPlugin from "@fullcalendar/list";
-import bootstrapPlugin from "@fullcalendar/bootstrap";
-import Select from "react-select";
-import moment from "moment-timezone";
-import { connect } from "react-redux";
-import Loader from "@/components/Common/Loader";
-import Router from "next/router";
-import { ToastContainer, toast } from "react-toastify";
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import * as Yup from "yup";
-import Datetime from "react-datetime";
-
-const status = [
-	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
-	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
-	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
-];
-
-const statusLLDIKTI = [
-	{ value: "Ditindaklanjuti LLDIKTI", label: "Ditindaklanjuti LLDIKTI", className: "State-ACT" },
-	{ value: "Delegasi ke DIKTI", label: "Delegasi ke DIKTI", className: "State-ACT" },
-	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
-];
-
-const jadwalSchema = Yup.object().shape({
-	judul: Yup.string().required("Required"),
-	dari_tanggal: Yup.date().required("Required"),
-	sampai_tanggal: Yup.date().required("Required"),
-});
-
-const laporanSchema = Yup.object().shape({
-	keterangan: Yup.string().required("Harus diisi"),
-});
-
-class Calendar extends Component {
-	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
-
-	calendarHeader = {
-		left: "prev,next today",
-		center: "title",
-		right: "dayGridMonth,timeGridWeek,timeGridDay",
-	};
-
-	constructor(props) {
-		super(props);
-		this.state = {
-			selectedEvent: null,
-			evRemoveOnDrop: true,
-			evNewName: "",
-			externalEvents: [],
-			dataLaporan: [],
-			dataEvent: [],
-			laporan: {},
-			selectedOption: null,
-			color: "",
-		};
-	}
-
-	static getInitialProps = ({ query }) => ({ query });
-
-	async componentDidMount() {
-		const { token, query } = this.props;
-		const laporan = await getOneLaporan(token, query.id);
-		const dataLaporan = await getPelaporan(token, { jadwal: true });
-
-		this.setState({ dataLaporan });
-		this.getDataEvent();
-		this.defaultStatus();
-		this.setState({ laporan });
-
-		let color = "#" + Math.random().toString(16).slice(2, 8);
-		if (laporan.data.jadwal) {
-			color = laporan.data.jadwal.warna;
-		}
-		this.setState({ color });
-	}
-
-	componentShouldUpdate(nextProps, nextState) {
-		return nextState.dataLaporan !== this.state.dataLaporan;
-	}
-
-	getStatus = () => (this.props.user?.role.id === 2021 ? statusLLDIKTI : status);
-
-	getDataEvent = () => {
-		const dataEvent = this.state.dataLaporan.data.map((e) => ({
-			id: e._id,
-			title: e.jadwal.judul,
-			start: moment(e.jadwal.dari_tanggal).format("YYYY-MM-DD"),
-			end: moment(e.jadwal.sampai_tanggal).add(1, "d").format("YYYY-MM-DD"),
-			backgroundColor: e.jadwal.warna,
-			borderColor: e.jadwal.warna,
-		}));
-		this.setState({ dataEvent });
-	};
-
-	eventClick = (info) => {
-		const data = {
-			title: info.event.title,
-			start: moment(info.event.start).format("DD MMMM YYYY"),
-			end: moment(info.event.end - 1).format("DD MMMM YYYY"),
-		};
-		this.setState({ selectedEvent: data });
-	};
-
-	handleEventReceive = (info) => {
-		var styles = getComputedStyle(info.draggedEl);
-		info.event.setProp("backgroundColor", styles.backgroundColor);
-		info.event.setProp("borderColor", styles.borderColor);
-		this.handleEventCalendar(info);
-	};
-
-	handleEventCalendar = async (data) => {
-		const { query, token } = this.props;
-		const { id } = query;
-		const { color, laporan } = this.state;
-
-		await toast.promise(
-			updateJadwal(token, id, {
-				judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
-				dari_tanggal: data.dari_tanggal,
-				sampai_tanggal: data.sampai_tanggal,
-				warna: color,
-			}),
-			{
-				pending: "Loading",
-				success: "Success",
-				error: "Error",
-			}
-		);
-		const dataLaporan = await getPelaporan(token, { jadwal: true });
-		this.setState({ dataLaporan });
-		this.getDataEvent();
-	};
-
-	defaultStatus = async () => {
-		const status = this.getStatus();
-		return this.setState({ selectedOption: status[0] });
-	};
-
-	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
-
-	handleSimpan = async (value) => {
-		const { token, query } = this.props;
-		const { id } = query;
-		let update = null;
-		if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
-			const toastid = toast.loading("Please wait...");
-			const data = { keterangan: value.keterangan };
-			if (value.status.value === this.getStatus()[1].value) {
-				data.change_role = "true";
-				update = await updateLaporan(token, id, data);
-			} else if (value.status.value === this.getStatus()[2].value) {
-				data.aktif = "false";
-				update = await updateLaporan(token, id, data);
-			}
-			if (!update) {
-				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
-			} else {
-				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
-				Router.push("/app/penjadwalan");
-			}
-		}
-	};
-
-	render() {
-		const { externalEvents, laporan, selectedOption, selectedEvent } = this.state;
-		return (
-			<ContentWrapper>
-				<div className="content-heading">
-					<div>Jadwal Pemeriksaan</div>
-					<div className="ml-auto">
-						<Link href="/app/penjadwalan">
-							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
-						</Link>
-					</div>
-				</div>
-				<div className="calendar-app">
-					{laporan.data ? (
-						<Row>
-							<Col>
-								<Card className="card-default">
-									<CardBody>
-										<DetailLaporan noStatus data={laporan.data} />
-									</CardBody>
-								</Card>
-							</Col>
-						</Row>
-					) : (
-						<Row className="mb-4">
-							<Col>
-								<Loader />
-							</Col>
-						</Row>
-					)}
-					<div className="row">
-						<div className="col-xl-4 col-lg-5">
-							<div className="row">
-								<div className="col-lg-12 col-md-6 col-12">
-									<Card className="card-default">
-										<div class="header-penjadwalan">
-											<h2 class="card-title-1">Status Pelaporan</h2>
-										</div>
-										<CardBody>
-											<Formik
-												enableReinitialize={true}
-												initialValues={{
-													status: this.getStatus()[0],
-													keterangan: "",
-												}}
-												validationSchema={selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? laporanSchema : null}
-												onSubmit={this.handleSimpan}
-											>
-												{() => (
-													<Form>
-														<FormGroup>
-															<label className="col-form-label">Status Laporan</label>
-															<Field name="status">
-																{({ field, form }) => (
-																	<Select
-																		value={field.value}
-																		onChange={(e) => {
-																			form.setFieldValue(field.name, e);
-																			this.handleChangeSelect(e);
-																		}}
-																		options={this.getStatus()}
-																		required
-																	/>
-																)}
-															</Field>
-															<ErrorMessage name="status" component="div" className="form-text text-danger" />
-														</FormGroup>
-														{selectedOption?.value === this.getStatus()[0].value ? (
-															""
-														) : (
-															<FormGroup>
-																<label className="col-form-label">Keterangan</label>
-																<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
-																<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
-															</FormGroup>
-														)}
-														<div className="btn-simpanjadwal">
-															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
-																<h4 className="text-btn-penjadwalan-1">Simpan</h4>
-															</Button>
-														</div>
-													</Form>
-												)}
-											</Formik>
-										</CardBody>
-									</Card>
-									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
-										""
-									) : (
-										<>
-											<Card className="card-default" title="">
-												<div class="header-penjadwalan">
-													<h2 className="card-title-1">Input Jadwal</h2>
-												</div>
-												<CardBody>
-													<Formik
-														enableReinitialize={true}
-														initialValues={{
-															judul: laporan.data?.jadwal?.judul ? laporan.data.jadwal.judul.split("- ")[1] : "",
-															dari_tanggal: laporan.data?.jadwal?.dari_tanggal ? moment(laporan.data.jadwal.dari_tanggal).format("DD MMMM YYYY") : "",
-															sampai_tanggal: laporan.data?.jadwal?.sampai_tanggal ? moment(laporan.data.jadwal.sampai_tanggal).format("DD MMMM YYYY") : "",
-														}}
-														validationSchema={jadwalSchema}
-														onSubmit={this.handleEventCalendar}
-													>
-														{() => (
-															<Form>
-																<FormGroup>
-																	<label className="col-form-label">Warna</label>
-																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
-																		{this.state.color}
-																	</div>
-																	{/* <div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}></div> */}
-																</FormGroup>
-
-																<FormGroup>
-																	<label className="col-form-label">Judul</label>
-																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
-																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
-																</FormGroup>
-																<Row>
-																	<Col>
-																		<FormGroup>
-																			<label className="col-form-label">Dari Tanggal</label>
-																			<Field name="dari_tanggal">
-																				{({ field, form }) => (
-																					<Datetime
-																						timeFormat={false}
-																						inputProps={{ className: "form-control" }}
-																						value={field.value}
-																						onChange={(e) => {
-																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
-																						}}
-																					/>
-																				)}
-																			</Field>
-																			<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
-																		</FormGroup>
-																	</Col>
-																	<Col>
-																		<FormGroup>
-																			<label className="col-form-label">Sampai Tanggal</label>
-																			<Field name="sampai_tanggal">
-																				{({ field, form }) => (
-																					<Datetime
-																						timeFormat={false}
-																						inputProps={{ className: "form-control" }}
-																						value={field.value}
-																						onChange={(e) => {
-																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
-																						}}
-																					/>
-																				)}
-																			</Field>
-																			<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
-																		</FormGroup>
-																	</Col>
-																</Row>
-
-																<FormGroup>
-																	<div className="btn-simpanpenjadwalan">
-																		<Button color="info" className="btn-colorpenjadwalan" block type="submit" disabled={laporan.data?.evaluasi.length}>
-																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
-																		</Button>
-																	</div>
-																</FormGroup>
-															</Form>
-														)}
-													</Formik>
-												</CardBody>
-											</Card>
-										</>
-									)}
-									<div className="mb-3">
-										{selectedEvent && (
-											<div>
-												<p>Selected:</p>
-												<div className="box-placeholder">{JSON.stringify(selectedEvent)}</div>
-											</div>
-										)}
-										{!selectedEvent && (
-											<div>
-												<p>Click calendar to show information</p>
-											</div>
-										)}
-									</div>
-								</div>
-							</div>
-						</div>
-						<div className="col-xl-8 col-lg-7">
-							<Card className="card-default">
-								<CardBody>
-									{/* START calendar */}
-									<FullCalendar
-										defaultView={this.dayGridMonth}
-										plugins={this.calendarPlugins}
-										events={this.state.dataEvent}
-										themeSystem={"bootstrap"}
-										header={this.calendarHeader}
-										deepChangeDetection={true}
-										eventClick={this.eventClick}
-									></FullCalendar>
-								</CardBody>
-							</Card>
-						</div>
-					</div>
-				</div>
-			</ContentWrapper>
-		);
-	}
-}
-
-const mapStateToProps = (state) => ({ user: state.user, token: state.token });
-export default connect(mapStateToProps)(Calendar);
+import React, { Component } from "react";
+import ContentWrapper from "@/components/Layout/ContentWrapper";
+import { Card, CardBody, CardHeader, CardTitle, Button, Row, Col, FormGroup, Input } from "reactstrap";
+import { getPelaporan, getOneLaporan, updateLaporan } from "@/actions/pelaporan";
+import { updateJadwal } from "@/actions/penjadwalan";
+import DetailLaporan from "@/components/Main/DetailLaporan";
+import Link from "next/link";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import bootstrapPlugin from "@fullcalendar/bootstrap";
+import Select from "react-select";
+import moment from "moment-timezone";
+import { connect } from "react-redux";
+import Loader from "@/components/Common/Loader";
+import Router from "next/router";
+import { ToastContainer, toast } from "react-toastify";
+import { Formik, Form, Field, ErrorMessage } from "formik";
+import * as Yup from "yup";
+import Datetime from "react-datetime";
+
+const status = [
+	{ value: "Ditindaklanjuti DIKTI", label: "Ditindaklanjuti DIKTI", className: "State-ACT" },
+	{ value: "Delegasi ke LLDIKTI", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
+
+const statusLLDIKTI = [
+	{ value: "Ditindaklanjuti LLDIKTI", label: "Ditindaklanjuti LLDIKTI", className: "State-ACT" },
+	{ value: "Delegasi ke DIKTI", label: "Delegasi ke DIKTI", className: "State-ACT" },
+	{ value: "Ditutup", label: "Ditutup", className: "State-ACT" },
+];
+
+const jadwalSchema = Yup.object().shape({
+	judul: Yup.string().required("Required"),
+	dari_tanggal: Yup.date().required("Required"),
+	sampai_tanggal: Yup.date().required("Required"),
+});
+
+const laporanSchema = Yup.object().shape({
+	keterangan: Yup.string().required("Harus diisi"),
+});
+
+class Calendar extends Component {
+	calendarPlugins = [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin, bootstrapPlugin];
+
+	calendarHeader = {
+		left: "prev,next today",
+		center: "title",
+		right: "dayGridMonth,timeGridWeek,timeGridDay",
+	};
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			selectedEvent: null,
+			evRemoveOnDrop: true,
+			evNewName: "",
+			externalEvents: [],
+			dataLaporan: [],
+			dataEvent: [],
+			laporan: {},
+			selectedOption: null,
+			color: "",
+		};
+	}
+
+	static getInitialProps = ({ query }) => ({ query });
+
+	async componentDidMount() {
+		const { token, query } = this.props;
+		const laporan = await getOneLaporan(token, query.id);
+		const dataLaporan = await getPelaporan(token, { jadwal: true });
+
+		this.setState({ dataLaporan });
+		this.getDataEvent();
+		this.defaultStatus();
+		this.setState({ laporan });
+
+		let color = "#" + Math.random().toString(16).slice(2, 8);
+		if (laporan.data.jadwal) {
+			color = laporan.data.jadwal.warna;
+		}
+		this.setState({ color });
+	}
+
+	componentShouldUpdate(nextProps, nextState) {
+		return nextState.dataLaporan !== this.state.dataLaporan;
+	}
+
+	getStatus = () => (this.props.user?.role.id === 2021 ? statusLLDIKTI : status);
+
+	getDataEvent = () => {
+		const dataEvent = this.state.dataLaporan.data.map((e) => ({
+			id: e._id,
+			title: e.jadwal.judul,
+			start: moment(e.jadwal.dari_tanggal).format("YYYY-MM-DD"),
+			end: moment(e.jadwal.sampai_tanggal).add(1, "d").format("YYYY-MM-DD"),
+			backgroundColor: e.jadwal.warna,
+			borderColor: e.jadwal.warna,
+		}));
+		this.setState({ dataEvent });
+	};
+
+	eventClick = (info) => {
+		const data = {
+			title: info.event.title,
+			start: moment(info.event.start).format("DD MMMM YYYY"),
+			end: moment(info.event.end - 1).format("DD MMMM YYYY"),
+		};
+		this.setState({ selectedEvent: data });
+	};
+
+	handleEventReceive = (info) => {
+		var styles = getComputedStyle(info.draggedEl);
+		info.event.setProp("backgroundColor", styles.backgroundColor);
+		info.event.setProp("borderColor", styles.borderColor);
+		this.handleEventCalendar(info);
+	};
+
+	handleEventCalendar = async (data) => {
+		const { query, token } = this.props;
+		const { id } = query;
+		const { color, laporan } = this.state;
+
+		await toast.promise(
+			updateJadwal(token, id, {
+				judul: "No.Laporan " + laporan.data.no_laporan + " - " + data.judul,
+				dari_tanggal: data.dari_tanggal,
+				sampai_tanggal: data.sampai_tanggal,
+				warna: color,
+			}),
+			{
+				pending: "Loading",
+				success: "Success",
+				error: "Error",
+			}
+		);
+		const dataLaporan = await getPelaporan(token, { jadwal: true });
+		this.setState({ dataLaporan });
+		this.getDataEvent();
+	};
+
+	defaultStatus = async () => {
+		const status = this.getStatus();
+		return this.setState({ selectedOption: status[0] });
+	};
+
+	handleChangeSelect = (selectedOption) => this.setState({ selectedOption });
+
+	handleSimpan = async (value) => {
+		const { token, query } = this.props;
+		const { id } = query;
+		let update = null;
+		if (value.status.value === this.getStatus()[1].value || value.status.value === this.getStatus()[2].value) {
+			const toastid = toast.loading("Please wait...");
+			const data = { keterangan: value.keterangan };
+			if (value.status.value === this.getStatus()[1].value) {
+				data.change_role = "true";
+				update = await updateLaporan(token, id, data);
+			} else if (value.status.value === this.getStatus()[2].value) {
+				data.aktif = "false";
+				update = await updateLaporan(token, id, data);
+			}
+			if (!update) {
+				toast.update(toastid, { render: "All is not good", type: "error", isLoading: false, autoClose: true, closeButton: true });
+			} else {
+				toast.update(toastid, { render: "All is good", type: "success", isLoading: false, autoClose: true, closeButton: true });
+				Router.push("/app/penjadwalan");
+			}
+		}
+	};
+
+	render() {
+		const { externalEvents, laporan, selectedOption, selectedEvent } = this.state;
+		return (
+			<ContentWrapper>
+				<div className="content-heading">
+					<div>Membuat Jadwal Pemeriksaan</div>
+					<div className="ml-auto">
+						<Link href="/app/penjadwalan">
+							<button className="btn btn-sm btn-secondary text-sm">&lt; back</button>
+						</Link>
+					</div>
+				</div>
+				<div className="calendar-app">
+					{laporan.data ? (
+						<Row>
+							<Col>
+								<Card className="card-default">
+									<CardBody>
+										<DetailLaporan noStatus data={laporan.data} />
+									</CardBody>
+								</Card>
+							</Col>
+						</Row>
+					) : (
+						<Row className="mb-4">
+							<Col>
+								<Loader />
+							</Col>
+						</Row>
+					)}
+					<div className="row">
+						<div className="col-xl-4 col-lg-5">
+							<div className="row">
+								<div className="col-lg-12 col-md-6 col-12">
+									<Card className="card-default">
+										<div class="header-penjadwalan">
+											<h2 class="card-title-1">Status Pelaporan</h2>
+										</div>
+										<CardBody>
+											<Formik
+												enableReinitialize={true}
+												initialValues={{
+													status: this.getStatus()[0],
+													keterangan: "",
+												}}
+												validationSchema={selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? laporanSchema : null}
+												onSubmit={this.handleSimpan}
+											>
+												{() => (
+													<Form>
+														<FormGroup>
+															<label className="col-form-label">Status Laporan</label>
+															<Field name="status">
+																{({ field, form }) => (
+																	<Select
+																		value={field.value}
+																		onChange={(e) => {
+																			form.setFieldValue(field.name, e);
+																			this.handleChangeSelect(e);
+																		}}
+																		options={this.getStatus()}
+																		required
+																	/>
+																)}
+															</Field>
+															<ErrorMessage name="status" component="div" className="form-text text-danger" />
+														</FormGroup>
+														{selectedOption?.value === this.getStatus()[0].value ? (
+															""
+														) : (
+															<FormGroup>
+																<label className="col-form-label">Keterangan</label>
+																<Field name="keterangan">{({ field, form }) => <Input type="text" placeholder="Keterangan" {...field} />}</Field>
+																<ErrorMessage name="keterangan" component="div" className="form-text text-danger" />
+															</FormGroup>
+														)}
+														<div className="btn-simpanjadwal">
+															<Button className="text-btn-penjadwalan-1 btn-colorpenjadwalan" color="primary" block disabled={laporan.data?.evaluasi.length}>
+																<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+															</Button>
+														</div>
+													</Form>
+												)}
+											</Formik>
+										</CardBody>
+									</Card>
+									{selectedOption?.value === this.getStatus()[2].value || selectedOption?.value === this.getStatus()[1].value ? (
+										""
+									) : (
+										<>
+											<Card className="card-default" title="">
+												<div class="header-penjadwalan">
+													<h2 className="card-title-1">Input Jadwal</h2>
+												</div>
+												<CardBody>
+													<Formik
+														enableReinitialize={true}
+														initialValues={{
+															judul: laporan.data?.jadwal?.judul ? laporan.data.jadwal.judul.split("- ")[1] : "",
+															dari_tanggal: laporan.data?.jadwal?.dari_tanggal ? moment(laporan.data.jadwal.dari_tanggal).format("DD MMMM YYYY") : "",
+															sampai_tanggal: laporan.data?.jadwal?.sampai_tanggal ? moment(laporan.data.jadwal.sampai_tanggal).format("DD MMMM YYYY") : "",
+														}}
+														validationSchema={jadwalSchema}
+														onSubmit={this.handleEventCalendar}
+													>
+														{() => (
+															<Form>
+																<FormGroup>
+																	<label className="col-form-label">Warna</label>
+																	<div className="badge d-block" style={{ backgroundColor: this.state.color, color: "white" }}>
+																		{this.state.color}
+																	</div>
+																	{/* <div className="warna-penjadwalan-block" style={{ backgroundColor: this.state.color, color: "white" }}></div> */}
+																</FormGroup>
+
+																<FormGroup>
+																	<label className="col-form-label">Judul</label>
+																	<Field name="judul">{({ field, form }) => <Input type="text" placeholder="judul" {...field} />}</Field>
+																	<ErrorMessage name="judul" component="div" className="form-text text-danger" />
+																</FormGroup>
+																<Row>
+																	<Col>
+																		<FormGroup>
+																			<label className="col-form-label">Dari Tanggal</label>
+																			<Field name="dari_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
+																						}}
+																					/>
+																				)}
+																			</Field>
+																			<ErrorMessage name="dari_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																	<Col>
+																		<FormGroup>
+																			<label className="col-form-label">Sampai Tanggal</label>
+																			<Field name="sampai_tanggal">
+																				{({ field, form }) => (
+																					<Datetime
+																						timeFormat={false}
+																						inputProps={{ className: "form-control" }}
+																						value={field.value}
+																						onChange={(e) => {
+																							form.setFieldValue(field.name, e.format("DD MMMM YYYY"));
+																						}}
+																					/>
+																				)}
+																			</Field>
+																			<ErrorMessage name="sampai_tanggal" component="div" className="form-text text-danger" />
+																		</FormGroup>
+																	</Col>
+																</Row>
+
+																<FormGroup>
+																	<div className="btn-simpanpenjadwalan">
+																		<Button color="info" className="btn-colorpenjadwalan" block type="submit" disabled={laporan.data?.evaluasi.length}>
+																			<h4 className="text-btn-penjadwalan-1">Simpan</h4>
+																		</Button>
+																	</div>
+																</FormGroup>
+															</Form>
+														)}
+													</Formik>
+												</CardBody>
+											</Card>
+										</>
+									)}
+									<div className="mb-3">
+										{selectedEvent && (
+											<div>
+												<p>Selected:</p>
+												<div className="box-placeholder">{JSON.stringify(selectedEvent)}</div>
+											</div>
+										)}
+										{!selectedEvent && (
+											<div>
+												<p>Click calendar to show information</p>
+											</div>
+										)}
+									</div>
+								</div>
+							</div>
+						</div>
+						<div className="col-xl-8 col-lg-7">
+							<Card className="card-default">
+								<CardBody>
+									{/* START calendar */}
+									<FullCalendar
+										defaultView={this.dayGridMonth}
+										plugins={this.calendarPlugins}
+										events={this.state.dataEvent}
+										themeSystem={"bootstrap"}
+										header={this.calendarHeader}
+										deepChangeDetection={true}
+										eventClick={this.eventClick}
+									></FullCalendar>
+								</CardBody>
+							</Card>
+						</div>
+					</div>
+				</div>
+			</ContentWrapper>
+		);
+	}
+}
+
+const mapStateToProps = (state) => ({ user: state.user, token: state.token });
+export default connect(mapStateToProps)(Calendar);