Revamp

src/components/events-calendar-new/index.css

@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
+:global .fc-col-header-cell {
+    background-color: #6381EB  ;
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+    border-radius: 0.3rem;
+
+}
+
+:global .fc-col-header-cell-cushion {
+    color: white;
+}
+
+:global .fc-button-primary{
+    border-color: #133BC5 !important;
+    border-width: 0.1rem !important;
+    color: #133BC5 !important;
+}
+
+:global .fc-toolbar-title{
+    margin-right:13rem !important;
+    color: #133BC5 !important;
+    font-size: 24 !important;
+    font-family: "Inter", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+}
+
+
+:global .fc-day-sun .fc-daygrid-day-number{
+    color: #BA0C0C !important;
+}
+
+:global .fc-daygrid-day-number{
+    font-weight: 800;
+    color: #0B2274 !important;
+}
+
+/* :global .fc-daygrid-day-events{
+    padding-left: 10px !important;
+} */

src/components/events-calendar-new/index.js

@@ -0,0 +1,108 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import "./index.css";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+import interactionPlugin from "@fullcalendar/interaction";
+import { tailwindWrapper } from "../../../../../formula_one/src/utils/tailwindWrapper";
+
+import { Grid, Responsive } from "semantic-ui-react";
+import { getEvents } from "../../actions/events";
+import { setActiveDay } from "../../actions/set-active-day";
+import { eventsUrl } from "../../urls";
+
+class EventCalendar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMobile: false,
+      width: 0,
+      columns: 12,
+    };
+  }
+
+  resize = () => {
+    if (this.state.width !== window.innerWidth) {
+      this.setState({
+        width: window.innerWidth,
+        isMobile: window.innerWidth <= 1000,
+        columns: window.innerWidth <= 1000 ? 16 : 12,
+      });
+    }
+  };
+
+  componentDidMount() {
+    this.props.setNavigation("Events");
+    this.props.getEvents(eventsUrl(this.props.activeHostel));
+    this.resize();
+  }
+
+  handleDateClick = (arg) => {
+    this.props.setActiveDay(arg.dateStr);
+  };
+
+  render() {
+    return (
+      <Grid.Column width={this.state.columns} floated='left'>
+      <div className={tailwindWrapper("mb-12")}>
+        <FullCalendar
+          defaultView="dayGridMonth"
+          dateClick={this.handleDateClick}
+          weekends
+          // aspectRatio="1.3"
+          events={this.props.mappedEvents}
+          selectable={true}
+          plugins={[
+            dayGridPlugin,
+            timeGridPlugin,
+            interactionPlugin,
+          ]}
+          headerToolbar={{
+            left: "today prev,next",
+            center: "title",
+            right: "",
+          }}
+          buttonText={{
+            today: 'Today',
+          }}
+          dayHeaderFormat={{
+            weekday: "long",
+          }}
+          // editable={true}
+          eventColor="#6381EB"
+        />
+      </div>
+      </Grid.Column>
+    );
+  }
+}
+function mapStateToProps(state) {
+  let mappedEvents = [];
+  if (state.events && state.events.length > 0) {
+    state.events.forEach((event) =>
+      mappedEvents.push({
+        title: event.name,
+        date: event.date,
+      })
+    );
+  }
+  return {
+    events: state.events,
+    mappedEvents: mappedEvents,
+    activeHostel: state.activeHostel,
+  };
+}
+const mapDispatchToProps = (dispatch) => {
+  return {
+    getEvents: (url) => {
+      dispatch(getEvents(url));
+    },
+    setActiveDay: (day) => {
+      dispatch(setActiveDay(day));
+    },
+  };
+};
+export default connect(mapStateToProps, mapDispatchToProps)(EventCalendar);