changes

src/App.scss

@@ -2,3 +2,13 @@ body {
     margin: 0px;
     padding: 0px;
   }
+  .wraper{
+    display: flex;
+    &__rightbar{
+      flex-grow: 1;
+    }
+    &__calendar{
+      width: 85%;
+    }
+  }
+

src/App.tsx

@@ -3,6 +3,8 @@ import TopBar from "./components/TopBar/";
 import Transfer from "./components/Transfer/";
 import "./App.scss";
 import Schedule from "./components/Calendar/";
+import { appointments } from "./components/Calendar/appointments";
+import RightBar from "./components/RightBar";
 
 function App() {
   const [isOpen, setOpen] = useState(false);
@@ -31,7 +33,18 @@ function App() {
           setOpen(!isOpen);
         }}
       />
-      <Schedule></Schedule>
+      <div className="wraper">
+        <div className="wraper__calendar">
+          <Schedule
+            data={appointments}
+            currentDate={new Date("2020-06-01")}
+          ></Schedule>
+        </div>
+        <div className="wraper__rightbar">
+          <RightBar />
+        </div>
+      </div>
+
       <h1>{text}</h1>
     </div>
   );

src/components/Calendar/index.scss

@@ -1,30 +0,0 @@
-.schedule {
-  display: flex;
-}
-.calendar {
-  display: flex;
-  width: 85%;
-}
-.shop-cart {
-  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;
-  margin-top: 10px;
-  height: 60px;
-  width: 90%;
-  background-color: #d4a8ff !important;
-  align-items: center;
-  justify-content: center;
-}
-.text {
-  border-bottom: 1px solid;
-}

src/components/Calendar/index.tsx

@@ -5,21 +5,21 @@ import {
   Scheduler,
   WeekView,
   Appointments,
+  AppointmentTooltip,
 } 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";
-import Paper from "@material-ui/core/Paper";
 
-interface CalendarProps {}
 
-interface CalendarState {
+interface CalendarProps {
   data: Array<AppointmentModel>;
   currentDate: Date;
 }
 
+interface CalendarState {}
+
 const formatDayScaleDate = (
   date: moment.MomentInput,
   options: { weekday: any }
@@ -37,9 +37,15 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     timeTableLayout: {
       border: "1px solid rgba(224, 224, 224, 1);",
+      borderCollapse: "separate",
     },
     timeTableCell: {
-      //borderRadius:2,
+      borderRadius: 15,
+    },
+    appointmentLayer: {
+      borderRadius: 15,
+      marginLeft: 5,
+      textAlign: "center",
     },
   })
 );
@@ -74,61 +80,39 @@ const TimeTableLayout = ({ ...restProps }: any) => {
   );
 };
 
+const Appointment = ({ ...restProps }: any) => {
+  const classes = useStyles();
+  return (
+    <Appointments.Appointment
+      {...restProps}
+      className={classes.appointmentLayer}
+    />
+  );
+};
+
 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;
+    const { data, currentDate } = this.props;
 
     return (
-      <div className="schedule">
+          <Scheduler data={data} locale={"PL-PL"} firstDayOfWeek={1}>
-        <div className="calendar">
-          <Scheduler
-            data={data}
-            height={850}
-            locale={"PL-PL"}
-            firstDayOfWeek={1}
-          >
             <ViewState defaultCurrentDate={currentDate} />
             <WeekView
               startDayHour={8}
               endDayHour={20}
               excludedDays={[0, 6]}
-              cellDuration={45}
+              cellDuration={60}
               dayScaleCellComponent={DayScaleCell}
               timeTableLayoutComponent={TimeTableLayout}
               timeTableCellComponent={TimeTableCell}
             />
-            <Appointments />
+            <Appointments appointmentComponent={Appointment} />
+            <AppointmentTooltip />
           </Scheduler>        
-        </div>
-        <div className="shop-cart">
-          <div className="text">
-            Hubert Wrzesiński<br></br>
-            Semestr zimowy 2020/2021
-          </div>
-          <Paper className="paper">1</Paper>
-          <Paper className="paper">2</Paper>
-          <Paper className="paper">3</Paper>
-          <Paper className="paper">4</Paper>
-          <Paper className="paper">5</Paper>
-          <Paper className="paper">6</Paper>
-          <Paper className="paper">7</Paper>
-          <Paper className="paper">8</Paper>
-          <Paper className="paper">9</Paper>
-          <Paper className="paper">10</Paper>
-        </div>
-      </div>
     );
   }
 }

src/components/RightBar/index.scss

@@ -0,0 +1,23 @@
+.shop-cart {
+    padding-top: 10px;
+    padding-left: 15px;
+    padding-right: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-family: Lato;
+  }
+  .paper {
+    display: flex;
+    margin-top: 10px;
+    height: 60px;
+    width: 90%;
+    background-color: #d4a8ff !important;
+    align-items: center;
+    justify-content: center;
+  }
+  .text {
+    border-bottom: 1px solid;
+  }
+  

src/components/RightBar/index.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import "./index.scss";
+import Paper from "@material-ui/core/Paper";
+interface RightBarProps {}
+
+interface RightBarState {}
+
+export default class RightBar extends React.Component<
+  RightBarProps,
+  RightBarState
+> {
+
+  render() {
+    return (
+      <div className="shop-cart">
+        <div className="text">
+          Hubert Wrzesiński<br></br>
+          Semestr zimowy 2020/2021
+        </div>
+        <Paper className="paper">1</Paper>
+        <Paper className="paper">2</Paper>
+        <Paper className="paper">3</Paper>
+        <Paper className="paper">4</Paper>
+        <Paper className="paper">5</Paper>
+        <Paper className="paper">6</Paper>
+        <Paper className="paper">7</Paper>
+        <Paper className="paper">8</Paper>
+        <Paper className="paper">9</Paper>
+        <Paper className="paper">10</Paper>
+      </div>
+    );
+  }
+}