mam dosyć

src/components/Calendar/index.scss

@@ -1,17 +1,33 @@
-.schedule{
+.schedule {
-display: flex;
+  display: flex;
-
 }
-.calendar{
+.calendar {
-display: flex;
+  display: flex;
-    width: 85%;
+  width: 85%;
-
-
 }
-.shop-cart{
+.shop-cart {
-    padding-top: 10px;
+  padding-top: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-family: Lato;
+  flex-grow: 1;
+}
+.paper {
     display: flex;
-    text-align: center;
+    margin-top: 10px;
-    font-family: Lato;
+  height: 60px;
-    flex-grow: 1;
+  width: 90%;
+  background-color: #D4A8FF !important;
+  align-items: center;
+  justify-content: center;
+}
+.text {
+  border-bottom: 1px solid;
+}
+.chujec{
+    background-color: red;
 }

src/components/Calendar/index.tsx

@@ -10,9 +10,12 @@ import moment from "moment";
 import "moment/locale/pl";
 import { appointments } from "./appointments";
 import "./index.scss";
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
 
-interface CalendarProps {}
+interface CalendarProps {
+  
+}
 
 interface CalendarState {
   data: Array<AppointmentModel>;
@@ -30,29 +33,48 @@ const formatDayScaleDate = (
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    dayScaleCell:{
+    dayScaleCell: {
-      backgroundColor:"red"
+      paddingTop: 10,
-    }
+      paddingBottom: 10,
-  }),
+    },
+    timeTableLayout: {
+      border: "1px solid rgba(224, 224, 224, 1);",
+    },
+    timeTableCell: {
+      //borderRadius:2,
+    },
+  })
 );
 
-
 //don't know how to set proper type of function arguments
-const   DayScaleCell = ({ formatDate, ...restProps }: any) => { 
+const DayScaleCell = ({ formatDate, ...restProps }: any) => {
   const classes = useStyles();
   return (
-  <WeekView.DayScaleCell
+    <WeekView.DayScaleCell
-    {...restProps}
+      {...restProps}
-    formatDate={formatDayScaleDate}
+      formatDate={formatDayScaleDate}
-    today={false}
+      today={false}
-    className={classes.dayScaleCell}
+      className={classes.dayScaleCell}
-  />
+    />
   );
-}
+};
-
-
 
+const TimeTableCell = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
+  );
+};
 
+const TimeTableLayout = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <WeekView.TimeTableLayout
+      {...restProps}
+      className={classes.timeTableLayout}
+    />
+  );
+};
 
 export default class Calendar extends React.PureComponent<
   CalendarProps,
@@ -67,6 +89,10 @@ export default class Calendar extends React.PureComponent<
     };
   }
 
+  expand(e: React.MouseEvent) {
+    //this.classList.add("chujec");
+    console.log("chujec");
+  }
   render() {
     const { data, currentDate } = this.state;
 
@@ -75,7 +101,7 @@ export default class Calendar extends React.PureComponent<
         <div className="calendar">
           <Scheduler
             data={data}
-            height={700}
+            height={850}
             locale={"PL-PL"}
             firstDayOfWeek={1}
           >
@@ -84,14 +110,29 @@ export default class Calendar extends React.PureComponent<
               startDayHour={8}
               endDayHour={20}
               excludedDays={[0, 6]}
-              cellDuration={60}
+              cellDuration={45}
               dayScaleCellComponent={DayScaleCell}
+              timeTableLayoutComponent={TimeTableLayout}
+              timeTableCellComponent={TimeTableCell}
             />
             <Appointments />
           </Scheduler>
         </div>
         <div className="shop-cart">
-          Hubert Wrzesiński Semestr zimowy 2020/2021
+          <div className="text">
+            Hubert Wrzesiński<br></br>
+            Semestr zimowy 2020/2021
+          </div>
+          <Paper className="paper" onClick={this.expand}>Chuj</Paper>
+          <Paper className="paper">Cipa</Paper>
+          <Paper className="paper">Pizda</Paper>
+          <Paper className="paper">Szmata</Paper>
+          <Paper className="paper">Jebać</Paper>
+          <Paper className="paper">Chuj</Paper>
+          <Paper className="paper">Cipa</Paper>
+          <Paper className="paper">Pizda</Paper>
+          <Paper className="paper">Szmata</Paper>
+          <Paper className="paper">Jebać</Paper>
         </div>
       </div>
     );