react-calendar-full
Version:
A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.
67 lines (66 loc) • 4.3 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { formatTimeToHHmm } from '../utils/time';
import { formatDateToYYYYMMDD } from '../utils/date';
const EventModal = ({ date, dayStartTime, onClose, event, eventStore, }) => {
const [formData, setFormData] = useState(event || {
id: 0,
date: formatDateToYYYYMMDD(date),
description: '',
startTime: formatTimeToHHmm(dayStartTime, 0),
endTime: formatTimeToHHmm(dayStartTime + 1, 0),
});
useEffect(() => {
event && setFormData(event);
}, [event]);
const isOpen = event != null;
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
eventStore.addOrUpdate({
id: event?.id,
date: formData.get('date'),
description: formData.get('description'),
startTime: formData.get('startTime')?.toString() || '',
endTime: formData.get('endTime')?.toString() || '',
});
onClose();
};
const handleDelete = () => {
if (event?.id == null) {
onClose();
return;
}
eventStore.delete(event?.id);
onClose();
};
const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prevState) => ({ ...prevState, [name]: value }));
};
return (React.createElement(React.Fragment, null,
React.createElement("div", { className: `modal ${isOpen ? 'show' : ''}`, style: { display: isOpen ? 'block' : 'none' } },
React.createElement("div", { className: "modal-dialog" },
React.createElement("div", { className: "modal-content" },
React.createElement("div", { className: "modal-header" },
React.createElement("h5", { className: "modal-title" }, "Add Calendar Event"),
React.createElement("button", { type: "button", className: "btn-close", onClick: onClose, "aria-label": "Close" })),
React.createElement("div", { className: "modal-body" },
React.createElement("form", { onSubmit: handleSubmit },
React.createElement("div", { className: "mb-3" },
React.createElement("label", { htmlFor: "description", className: "form-label" }, "Description"),
React.createElement("textarea", { className: "form-control", id: "description", name: "description", value: formData.description, onChange: handleChange })),
React.createElement("div", { className: "mb-3" },
React.createElement("label", { htmlFor: "date", className: "form-label" }, "Date"),
React.createElement("input", { type: "date", className: "form-control", id: "date", name: "date", value: formData.date, onChange: handleChange })),
React.createElement("div", { className: "mb-3" },
React.createElement("label", { htmlFor: "startTime", className: "form-label" }, "Start Time"),
React.createElement("input", { type: "time", className: "form-control", id: "startTime", name: "startTime", step: "900", value: formData.startTime, onChange: handleChange })),
React.createElement("div", { className: "mb-3" },
React.createElement("label", { htmlFor: "endTime", className: "form-label" }, "End Time"),
React.createElement("input", { type: "time", className: "form-control", id: "endTime", name: "endTime", step: "900", value: formData.endTime, onChange: handleChange })),
React.createElement("div", { className: "d-flex justify-content-end" },
event?.id != null && (React.createElement("button", { type: "button", className: "btn btn-danger me-2", onClick: handleDelete }, "Delete")),
React.createElement("button", { type: "submit", className: "btn btn-primary" }, "Save"))))))),
isOpen && React.createElement("div", { className: "modal-backdrop fade show" })));
};
export default EventModal;