react-calendar-full
Version:
A full-featured React calendar component with event scheduling and monthly, weekly, and daily views.
92 lines (91 loc) • 5.71 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const time_1 = require("../utils/time");
const date_1 = require("../utils/date");
const EventModal = ({ date, dayStartTime, onClose, event, eventStore, }) => {
const [formData, setFormData] = (0, react_1.useState)(event || {
id: 0,
date: (0, date_1.formatDateToYYYYMMDD)(date),
description: '',
startTime: (0, time_1.formatTimeToHHmm)(dayStartTime, 0),
endTime: (0, time_1.formatTimeToHHmm)(dayStartTime + 1, 0),
});
(0, react_1.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_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: `modal ${isOpen ? 'show' : ''}`, style: { display: isOpen ? 'block' : 'none' } },
react_1.default.createElement("div", { className: "modal-dialog" },
react_1.default.createElement("div", { className: "modal-content" },
react_1.default.createElement("div", { className: "modal-header" },
react_1.default.createElement("h5", { className: "modal-title" }, "Add Calendar Event"),
react_1.default.createElement("button", { type: "button", className: "btn-close", onClick: onClose, "aria-label": "Close" })),
react_1.default.createElement("div", { className: "modal-body" },
react_1.default.createElement("form", { onSubmit: handleSubmit },
react_1.default.createElement("div", { className: "mb-3" },
react_1.default.createElement("label", { htmlFor: "description", className: "form-label" }, "Description"),
react_1.default.createElement("textarea", { className: "form-control", id: "description", name: "description", value: formData.description, onChange: handleChange })),
react_1.default.createElement("div", { className: "mb-3" },
react_1.default.createElement("label", { htmlFor: "date", className: "form-label" }, "Date"),
react_1.default.createElement("input", { type: "date", className: "form-control", id: "date", name: "date", value: formData.date, onChange: handleChange })),
react_1.default.createElement("div", { className: "mb-3" },
react_1.default.createElement("label", { htmlFor: "startTime", className: "form-label" }, "Start Time"),
react_1.default.createElement("input", { type: "time", className: "form-control", id: "startTime", name: "startTime", step: "900", value: formData.startTime, onChange: handleChange })),
react_1.default.createElement("div", { className: "mb-3" },
react_1.default.createElement("label", { htmlFor: "endTime", className: "form-label" }, "End Time"),
react_1.default.createElement("input", { type: "time", className: "form-control", id: "endTime", name: "endTime", step: "900", value: formData.endTime, onChange: handleChange })),
react_1.default.createElement("div", { className: "d-flex justify-content-end" },
event?.id != null && (react_1.default.createElement("button", { type: "button", className: "btn btn-danger me-2", onClick: handleDelete }, "Delete")),
react_1.default.createElement("button", { type: "submit", className: "btn btn-primary" }, "Save"))))))),
isOpen && react_1.default.createElement("div", { className: "modal-backdrop fade show" })));
};
exports.default = EventModal;