commit

components/Extras/calendar.view.js

@@ -15,6 +15,7 @@ import events from "./calendar.events";
 import Select from "react-select";
 import { addStatus } from "@/actions/pelaporan";
 import { getPT } from "@/actions/PT";
+import moment from "moment";
 
 const status = [
 	{ value: "Ditindaklanjuti Dikti Ristek", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
@@ -71,7 +72,7 @@ class Calendar extends Component {
 			color = laporan.data[0].penjadwalan.background_color;
 		}
 		const pt = await getPT({ id: laporan.data[0].pt_id });
-		this.setState({ externalEvents: [{ id: this.props.query.number, color, name: `Jadwal Pemeriksaan - No.Laporan : ${this.props.query.number} - ${pt.data[0].nama}` }] });
+		this.setState({ externalEvents: [{ id: this.props.query.number, color, name: `Jadwal Pemeriksaan - No.Laporan : ${this.props.query.number} - ${pt.data[0].nama}`, allDay: true }] });
 	}
 
 	getDataEvent = () => {
@@ -88,12 +89,14 @@ class Calendar extends Component {
 		this.setState({ dataEvent });
 	};
 
-	dayClick = (date) => {
-		this.setState({
-			selectedEvent: {
-				date: date.dateStr,
-			},
-		});
+	eventClick = (info) => {
+		console.log(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 });
 	};
 
 	addEvent(event) {
@@ -136,7 +139,7 @@ class Calendar extends Component {
 	};
 
 	render() {
-		const { externalEvents, laporan, selectedOption } = this.state;
+		const { externalEvents, laporan, selectedOption, selectedEvent } = this.state;
 		return (
 			<ContentWrapper>
 				<div className="content-heading">
@@ -192,6 +195,19 @@ class Calendar extends Component {
 											</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>
@@ -208,7 +224,7 @@ class Calendar extends Component {
 										editable={true}
 										droppable={true}
 										deepChangeDetection={true}
-										dateClick={this.dayClick}
+										eventClick={this.eventClick}
 										eventReceive={this.handleEventReceive}
 										eventDrop={this.handleEventCalendar}
 										eventResize={this.handleEventCalendar}