2020-06-05 14:31:48 +02:00
|
|
|
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";
|
2020-06-06 13:17:56 +02:00
|
|
|
import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";
|
|
|
|
import Paper from "@material-ui/core/Paper";
|
2020-06-05 14:31:48 +02:00
|
|
|
|
2020-06-06 13:17:56 +02:00
|
|
|
interface CalendarProps {
|
|
|
|
|
|
|
|
}
|
2020-06-05 14:31:48 +02:00
|
|
|
|
|
|
|
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();
|
|
|
|
};
|
|
|
|
|
2020-06-05 14:58:52 +02:00
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
2020-06-05 14:31:48 +02:00
|
|
|
createStyles({
|
2020-06-06 13:17:56 +02:00
|
|
|
dayScaleCell: {
|
|
|
|
paddingTop: 10,
|
|
|
|
paddingBottom: 10,
|
|
|
|
},
|
|
|
|
timeTableLayout: {
|
|
|
|
border: "1px solid rgba(224, 224, 224, 1);",
|
|
|
|
},
|
|
|
|
timeTableCell: {
|
|
|
|
//borderRadius:2,
|
|
|
|
},
|
|
|
|
})
|
2020-06-05 14:31:48 +02:00
|
|
|
);
|
|
|
|
|
2020-06-05 14:58:52 +02:00
|
|
|
//don't know how to set proper type of function arguments
|
2020-06-06 13:17:56 +02:00
|
|
|
const DayScaleCell = ({ formatDate, ...restProps }: any) => {
|
2020-06-05 14:58:52 +02:00
|
|
|
const classes = useStyles();
|
|
|
|
return (
|
2020-06-06 13:17:56 +02:00
|
|
|
<WeekView.DayScaleCell
|
|
|
|
{...restProps}
|
|
|
|
formatDate={formatDayScaleDate}
|
|
|
|
today={false}
|
|
|
|
className={classes.dayScaleCell}
|
|
|
|
/>
|
2020-06-05 14:58:52 +02:00
|
|
|
);
|
2020-06-06 13:17:56 +02:00
|
|
|
};
|
2020-06-05 14:58:52 +02:00
|
|
|
|
2020-06-06 13:17:56 +02:00
|
|
|
const TimeTableCell = ({ ...restProps }: any) => {
|
|
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
|
|
<WeekView.TimeTableCell {...restProps} className={classes.timeTableCell} />
|
|
|
|
);
|
|
|
|
};
|
2020-06-05 14:58:52 +02:00
|
|
|
|
2020-06-06 13:17:56 +02:00
|
|
|
const TimeTableLayout = ({ ...restProps }: any) => {
|
|
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
|
|
<WeekView.TimeTableLayout
|
|
|
|
{...restProps}
|
|
|
|
className={classes.timeTableLayout}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
2020-06-05 14:31:48 +02:00
|
|
|
|
|
|
|
export default class Calendar extends React.PureComponent<
|
|
|
|
CalendarProps,
|
|
|
|
CalendarState
|
|
|
|
> {
|
|
|
|
constructor(props: CalendarProps) {
|
|
|
|
super(props);
|
2020-06-06 13:17:56 +02:00
|
|
|
|
2020-06-05 14:31:48 +02:00
|
|
|
this.state = {
|
|
|
|
data: appointments,
|
|
|
|
currentDate: new Date("2020-06-01"),
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-06-06 13:17:56 +02:00
|
|
|
expand(e: React.MouseEvent) {
|
|
|
|
//this.classList.add("chujec");
|
|
|
|
console.log("chujec");
|
|
|
|
}
|
2020-06-05 14:31:48 +02:00
|
|
|
render() {
|
|
|
|
const { data, currentDate } = this.state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="schedule">
|
|
|
|
<div className="calendar">
|
|
|
|
<Scheduler
|
|
|
|
data={data}
|
2020-06-06 13:17:56 +02:00
|
|
|
height={850}
|
2020-06-05 14:31:48 +02:00
|
|
|
locale={"PL-PL"}
|
|
|
|
firstDayOfWeek={1}
|
|
|
|
>
|
|
|
|
<ViewState defaultCurrentDate={currentDate} />
|
|
|
|
<WeekView
|
|
|
|
startDayHour={8}
|
|
|
|
endDayHour={20}
|
|
|
|
excludedDays={[0, 6]}
|
2020-06-06 13:17:56 +02:00
|
|
|
cellDuration={45}
|
2020-06-05 14:31:48 +02:00
|
|
|
dayScaleCellComponent={DayScaleCell}
|
2020-06-06 13:17:56 +02:00
|
|
|
timeTableLayoutComponent={TimeTableLayout}
|
|
|
|
timeTableCellComponent={TimeTableCell}
|
2020-06-05 14:31:48 +02:00
|
|
|
/>
|
|
|
|
<Appointments />
|
|
|
|
</Scheduler>
|
|
|
|
</div>
|
|
|
|
<div className="shop-cart">
|
2020-06-06 13:17:56 +02:00
|
|
|
<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>
|
2020-06-05 14:31:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|