+ );
+ }
+}
+
+AddEventForm.propTypes = {
+ classes: PropTypes.object.isRequired,
+ handleSubmit: PropTypes.func.isRequired,
+ reset: PropTypes.func.isRequired,
+ pristine: PropTypes.bool.isRequired,
+ submitting: PropTypes.bool.isRequired,
+};
+
+const AddEventFormRedux = reduxForm({
+ form: 'immutableAddCalendar',
+ enableReinitialize: true,
+})(AddEventForm);
+
+const reducer = 'calendar';
+const AddEventInit = connect(
+ state => ({
+ force: state,
+ initialValues: state.getIn([reducer, 'formValues'])
+ }),
+)(AddEventFormRedux);
+
+export default withStyles(styles)(AddEventInit);
diff --git a/front/odiparpack/app/components/Calendar/DetailEvent.js b/front/odiparpack/app/components/Calendar/DetailEvent.js
new file mode 100644
index 0000000..b25d8b9
--- /dev/null
+++ b/front/odiparpack/app/components/Calendar/DetailEvent.js
@@ -0,0 +1,167 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Today from '@material-ui/icons/Today';
+import { Typography, IconButton, Menu, MenuItem, Divider, Popover } from '@material-ui/core';
+import styles from './calendar-jss';
+
+
+const ITEM_HEIGHT = 48;
+
+class DetailEvent extends React.Component {
+ state = {
+ anchorElOpt: null,
+ };
+
+ handleClickOpt = event => {
+ this.setState({ anchorElOpt: event.currentTarget });
+ };
+
+ handleCloseOpt = () => {
+ this.setState({ anchorElOpt: null });
+ };
+
+ handleDeleteEvent = (event) => {
+ this.setState({ anchorElOpt: null });
+ this.props.remove(event);
+ this.props.close();
+ };
+
+ render() {
+ const getDate = date => {
+ if (date._isAMomentObject) {
+ return date.format('MMMM Do YYYY');
+ }
+ let dd = date.getDate();
+ const monthNames = [
+ 'January', 'February', 'March', 'April', 'May', 'June',
+ 'July', 'August', 'September', 'October', 'November', 'December'
+ ];
+ const mm = monthNames[date.getMonth()]; // January is 0!
+ const yyyy = date.getFullYear();
+
+ if (dd < 10) {
+ dd = '0' + dd;
+ }
+
+ const convertedDate = mm + ', ' + dd + ' ' + yyyy;
+
+ return convertedDate;
+ };
+
+ const getTime = time => {
+ if (time._isAMomentObject) {
+ return time.format('LT');
+ }
+ let h = time.getHours();
+ let m = time.getMinutes();
+
+ if (h < 10) {
+ h = '0' + h;
+ }
+
+ if (m < 10) {
+ m = '0' + m;
+ }
+
+ const convertedTime = h + ':' + m;
+ return convertedTime;
+ };
+
+ const {
+ classes,
+ anchorEl,
+ event,
+ close,
+ anchorPos
+ } = this.props;
+ const { anchorElOpt } = this.state;
+ return (
+