Latest schedule

client/package.json

@@ -19,19 +19,24 @@
     "coverage": "jest --coverage --config=./src/jest.config.js"
   },
   "dependencies": {
+    "@types/react-custom-scrollbars": "^4.0.7",
+    "@types/react-color": "^2.17.4",
     "algolia-places-react": "^1.5.1",
     "antd": "^4.6.6",
     "axios": "~0.20.0",
     "chart.js": "^2.9.3",
     "csvtojson": "~2.0.10",
     "lodash": "~4.17.19",
+    "mobile-device-detect": "^0.4.3",
     "moment": "~2.24.0",
     "moment-timezone": "~0.5.28",
     "next": "^9.5.4",
     "next-transpile-modules": "^4.1.0",
     "qs": "^6.9.4",
     "react": "~16.13.1",
     "react-chartjs-2": "^2.9.0",
+    "react-custom-scrollbars": "^4.2.1",
+    "react-color": "^2.19.3",
     "react-dom": "~16.13.1",
     "react-gauge-chart": "git+https://github.com/BossBele/react-gauge-chart.git",
     "react-masonry-css": "^1.0.14",

client/src/components/Schedule/CalendarView/Calendar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import MobileCalendar from './components/MobileCalendar';
+import DesktopCalendar from './components/DesktopCalendar';
+import { CourseEvent } from 'services/course';
+import { isMobile } from 'mobile-device-detect';
+
+type Props = {
+  data: CourseEvent[];
+  timeZone: string;
+  storedTagColors?: object;
+  alias: string;
+};
+
+export const CalendarView: React.FC<Props> = ({ data, timeZone, storedTagColors, alias }) => {
+  return (
+    <>
+      {isMobile ? (
+        <MobileCalendar data={data} timeZone={timeZone} storedTagColors={storedTagColors} alias={alias} />
+      ) : (
+        <DesktopCalendar data={data} timeZone={timeZone} storedTagColors={storedTagColors} alias={alias} />
+      )}
+    </>
+  );
+};

client/src/components/Schedule/CalendarView/components/DesktopCalendar.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { Calendar, Badge, Typography, Tooltip } from 'antd';
+import { getMonthValue, getListData } from '../utils/filters';
+import { Scrollbars } from 'react-custom-scrollbars';
+import ModalWindow from './ModalWindow';
+import { CourseEvent } from 'services/course';
+import { Moment } from 'moment';
+
+const { Title } = Typography;
+
+type Props = {
+  data: CourseEvent[];
+  timeZone: string;
+  storedTagColors?: object;
+  alias: string;
+};
+
+const DesktopCalendar: React.FC<Props> = ({ data, timeZone, storedTagColors, alias }) => {
+  const [modalWindowData, setModalWindowData] = useState<CourseEvent | null>(null);
+  const [showWindow, setShowWindow] = useState<boolean>(false);
+
+  const handleOnClose = () => {
+    setShowWindow(false);
+  };
+
+  function showModalWindow(id: number) {
+    setModalWindowData(() => {
+      setShowWindow(true);
+      return data.filter(event => event.id === id)[0];
+    });
+  }
+
+  const dateCellRender = (date: unknown | Moment) => {
+    return (
+      <Scrollbars autoHide autoHideTimeout={500} autoHideDuration={200}>
+        <ul style={{ padding: '5px' }}>
+          {getListData((date as unknown) as Moment, data, timeZone, storedTagColors).map(coloredEvent => {
+            return (
+              <Tooltip title={coloredEvent.time}>
+                <li
+                  style={{
+                    border: `1px solid ${coloredEvent.color}`,
+                    borderRadius: '5px',
+                    backgroundColor: `${coloredEvent.color}10`,
+                    listStyleType: 'none',
+                    overflowWrap: 'anywhere',
+                    marginBottom: '5px',
+                    padding: '0px 2px 2px',
+                  }}
+                  key={coloredEvent.key}
+                  onClick={() => showModalWindow(coloredEvent.key)}
+                >
+                  <Badge color={coloredEvent.color} text={coloredEvent.name} />
+                </li>
+              </Tooltip>
+            );
+          })}
+        </ul>
+      </Scrollbars>
+    );
+  };
+
+  const monthCellRender = (date: unknown | Moment) => {
+    const num = getMonthValue((date as unknown) as Moment, data, timeZone);
+
+    return !!num && <Title level={5} style={{ textAlign: 'center' }}>{`Events & tasks: ${num}.`}</Title>;
+  };
+
+  return (
+    <div className="calendar-container">
+      {modalWindowData && (
+        <ModalWindow
+          isOpen={showWindow}
+          data={modalWindowData}
+          handleOnClose={handleOnClose}
+          timeZone={timeZone}
+          storedTagColors={storedTagColors}
+          alias={alias}
+        />
+      )}
+      <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
+    </div>
+  );
+};
+
+export default DesktopCalendar;