From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/components/Calendar/EventCalendar.js       | 70 ++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 front/odiparpack/app/components/Calendar/EventCalendar.js

(limited to 'front/odiparpack/app/components/Calendar/EventCalendar.js')

diff --git a/front/odiparpack/app/components/Calendar/EventCalendar.js b/front/odiparpack/app/components/Calendar/EventCalendar.js
new file mode 100644
index 0000000..fe7b76e
--- /dev/null
+++ b/front/odiparpack/app/components/Calendar/EventCalendar.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import BigCalendar from 'react-big-calendar';
+import moment from 'moment';
+import { Paper } from '@material-ui/core';
+import styles from './calendar-jss';
+
+BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));
+
+function Event(event) {
+  return (
+    <span className="eventBlock">{event.title}</span>
+  );
+}
+
+class EventCalendar extends React.Component {
+  eventStyleGetter = event => {
+    const backgroundColor = '#' + event.hexColor;
+    const style = {
+      backgroundColor,
+    };
+    return {
+      style
+    };
+  }
+
+  render() {
+    const allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);
+    const {
+      classes,
+      events,
+      handleEventClick
+    } = this.props;
+    return (
+      <Paper className={classes.root}>
+        <BigCalendar
+          className={classes.calendarWrap}
+          selectable
+          events={events}
+          defaultView="month"
+          views={allViews}
+          step={60}
+          showMultiDayTimes
+          scrollToTime={new Date(1970, 1, 1, 6)}
+          defaultDate={new Date(2015, 3, 12)}
+          onSelectEvent={(selectedEvent) => handleEventClick(selectedEvent)}
+          eventPropGetter={(this.eventStyleGetter)}
+          onSelectSlot={slotInfo => console.log(
+            `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} `
+                + `\nend: ${slotInfo.end.toLocaleString()}`
+                + `\naction: ${slotInfo.action}`
+          )
+          }
+          components={{
+            event: Event
+          }}
+        />
+      </Paper>
+    );
+  }
+}
+
+EventCalendar.propTypes = {
+  classes: PropTypes.object.isRequired,
+  events: PropTypes.array.isRequired,
+  handleEventClick: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(EventCalendar);
-- 
cgit v1.2.3