kalendarz pre-pre-pre-alfa

src/App.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import TopBar from "./components/TopBar/";
 import Transfer from "./components/Transfer/";
 import "./App.scss";
+import Schedule from "./components/Calendar/";
 
 function App() {
   const [isOpen, setOpen] = useState(false);
@@ -30,6 +31,7 @@ function App() {
           setOpen(!isOpen);
         }}
       />
+      <Schedule></Schedule>
 	  <h1>{text}</h1>
     </div>
   );

src/components/Calendar/appointments.js

@@ -0,0 +1,23 @@
+export const appointments = [
+  {
+    title: 'Snmutna buzia',
+    startDate: new Date(2020, 5, 3, 9, 45),
+    endDate: new Date(2020, 5, 3, 11, 30),
+    id: 0,
+    location: 'Room 1',
+  },
+  {
+    title: 'Twoja stara beszamel',
+    startDate: new Date(2020, 5, 1, 9, 45),
+    endDate: new Date(2020, 5, 1, 11, 30),
+    id: 0,
+    location: 'Room 1',
+  },
+  {
+    title: 'Twoja stara beszamel',
+    startDate: new Date(2020, 5, 1, 9, 45),
+    endDate: new Date(2020, 5, 1, 11, 30),
+    id: 0,
+    location: 'Room 1',
+  },
+];

src/components/Calendar/index.scss

@@ -0,0 +1,21 @@
+.schedule{
+display: flex;
+
+}
+.calendar{
+display: flex;
+    width: 85%;
+
+
+}
+.shop-cart{
+    padding-top: 10px;
+    display: flex;
+    text-align: center;
+    font-family: Lato;
+    flex-grow: 1;
+}
+.chuj{
+    padding-top: 20px !important;
+    padding-bottom: 20px !important;
+    }

src/components/Calendar/index.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { ViewState } from "@devexpress/dx-react-scheduler";
+import { AppointmentModel } from "@devexpress/dx-react-scheduler";
+import {
+  Scheduler,
+  WeekView,
+  Appointments,
+} from "@devexpress/dx-react-scheduler-material-ui";
+import moment from "moment";
+import "moment/locale/pl";
+import { appointments } from "./appointments";
+import "./index.scss";
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+interface CalendarProps {}
+
+interface CalendarState {
+  data: Array<AppointmentModel>;
+  currentDate: Date;
+}
+
+const formatDayScaleDate = (
+  date: moment.MomentInput,
+  options: { weekday: any }
+) => {
+  const momentDate = moment(date).locale("pl");
+  const { weekday } = options;
+  return momentDate.format(weekday ? "dddd" : " ").toUpperCase();
+};
+
+const styles = makeStyles((theme: Theme) =>
+  createStyles({
+    dayScaleCell:{
+      backgroundColor:"red"
+    }
+  }),
+);
+
+const DayScaleCell = (({ formatDate,classes, ...restProps }: any) => (
+  <WeekView.DayScaleCell
+    {...restProps}
+    formatDate={formatDayScaleDate}
+    today={false}
+    className={"chuj"}
+  />
+));
+
+export default class Calendar extends React.PureComponent<
+  CalendarProps,
+  CalendarState
+> {
+  constructor(props: CalendarProps) {
+    super(props);
+
+    this.state = {
+      data: appointments,
+      currentDate: new Date("2020-06-01"),
+    };
+  }
+
+  render() {
+    const { data, currentDate } = this.state;
+
+    return (
+      <div className="schedule">
+        <div className="calendar">
+          <Scheduler
+            data={data}
+            height={700}
+            locale={"PL-PL"}
+            firstDayOfWeek={1}
+          >
+            <ViewState defaultCurrentDate={currentDate} />
+            <WeekView
+              startDayHour={8}
+              endDayHour={20}
+              excludedDays={[0, 6]}
+              cellDuration={60}
+              dayScaleCellComponent={DayScaleCell}
+            />
+            <Appointments />
+          </Scheduler>
+        </div>
+        <div className="shop-cart">
+          Hubert Wrzesiński Semestr zimowy 2020/2021
+        </div>
+      </div>
+    );
+  }
+}

src/teest.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const styles = {
+  root: {
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    border: 0,
+    borderRadius: 3,
+    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+  },
+};
+
+function HigherOrderComponent(props: { classes: any; }) {
+  const { classes } = props;
+  return <Button className={classes.root}>Higher-order component</Button>;
+}
+
+HigherOrderComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(HigherOrderComponent);