This commit is contained in:
wrzesinski-hubert 2020-06-07 15:57:51 +02:00
parent 6a1c375913
commit 404361b97a
8 changed files with 111 additions and 78 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

View File

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

View File

@ -3,6 +3,8 @@ import TopBar from "./components/TopBar/";
import Transfer from "./components/Transfer/"; import Transfer from "./components/Transfer/";
import "./App.scss"; import "./App.scss";
import Schedule from "./components/Calendar/"; import Schedule from "./components/Calendar/";
import { appointments } from "./components/Calendar/appointments";
import RightBar from "./components/RightBar";
function App() { function App() {
const [isOpen, setOpen] = useState(false); const [isOpen, setOpen] = useState(false);
@ -17,10 +19,10 @@ function App() {
handleTransfer={(e) => { handleTransfer={(e) => {
setOpen(!isOpen); setOpen(!isOpen);
}} }}
handleLanguage={(e)=>{ handleLanguage={(e) => {
alert("Language"); alert("Language");
}} }}
handleProfile={(e)=>{ handleProfile={(e) => {
alert("Profile"); alert("Profile");
}} }}
isOpen={isOpen} isOpen={isOpen}
@ -31,8 +33,19 @@ function App() {
setOpen(!isOpen); setOpen(!isOpen);
}} }}
/> />
<Schedule></Schedule> <div className="wraper">
<h1>{text}</h1> <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> </div>
); );
} }

View File

@ -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;
}

View File

@ -5,21 +5,21 @@ import {
Scheduler, Scheduler,
WeekView, WeekView,
Appointments, Appointments,
AppointmentTooltip,
} from "@devexpress/dx-react-scheduler-material-ui"; } from "@devexpress/dx-react-scheduler-material-ui";
import moment from "moment"; import moment from "moment";
import "moment/locale/pl"; import "moment/locale/pl";
import { appointments } from "./appointments";
import "./index.scss"; 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 CalendarState { interface CalendarProps {
data: Array<AppointmentModel>; data: Array<AppointmentModel>;
currentDate: Date; currentDate: Date;
} }
interface CalendarState {}
const formatDayScaleDate = ( const formatDayScaleDate = (
date: moment.MomentInput, date: moment.MomentInput,
options: { weekday: any } options: { weekday: any }
@ -37,9 +37,15 @@ const useStyles = makeStyles((theme: Theme) =>
}, },
timeTableLayout: { timeTableLayout: {
border: "1px solid rgba(224, 224, 224, 1);", border: "1px solid rgba(224, 224, 224, 1);",
borderCollapse: "separate",
}, },
timeTableCell: { 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< export default class Calendar extends React.PureComponent<
CalendarProps, CalendarProps,
CalendarState CalendarState
> { > {
constructor(props: CalendarProps) {
super(props);
this.state = {
data: appointments,
currentDate: new Date("2020-06-01"),
};
}
render() { render() {
const { data, currentDate } = this.state; const { data, currentDate } = this.props;
return ( 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} /> <ViewState defaultCurrentDate={currentDate} />
<WeekView <WeekView
startDayHour={8} startDayHour={8}
endDayHour={20} endDayHour={20}
excludedDays={[0, 6]} excludedDays={[0, 6]}
cellDuration={45} cellDuration={60}
dayScaleCellComponent={DayScaleCell} dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout} timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell} timeTableCellComponent={TimeTableCell}
/> />
<Appointments /> <Appointments appointmentComponent={Appointment} />
<AppointmentTooltip />
</Scheduler> </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>
); );
} }
} }

View File

@ -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;
}

View File

@ -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>
);
}
}