javascript - 如何使用@devexpress/dx-react-scheduler-material-ui 切换时间到水平线？

Question

如何使用@devexpress/dx-react-scheduler-material-ui 切换时间到水平线？？？

<WeekView
    startDayHour={7}
    endDayHour={20}
    timeTableCellComponent={TimeTableCell}
    dayScaleCellComponent={DayScaleCell}
/>

在此处输入图像描述

标签： javascriptreactjsmaterial-uidevexpressreact-material

Answer 1

import * as React from "react";
import Paper from "@material-ui/core/Paper";
import {
  Scheduler,
  WeekView,
  Appointments,
  AppointmentTooltip
} from "@devexpress/dx-react-scheduler-material-ui";

import appointments from "../../../demo-data/today-appointments";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  timeTableCell: {
    height: "50px"
  },
  timeLabel: {
    height: "50px",
    lineHeight: "98px",
    "&:first-child": {
      height: "50px"
    },
    "&:last-child": {
      height: "50px"
    }
  }
});

const TimeTableCell = (props) => {
  const classes = useStyles();
  return <WeekView.TimeTableCell {...props} className={classes.timeTableCell} />;
};
const TimeLabel = (props) => {
  const classes = useStyles();
  return <WeekView.TimeScaleLabel {...props} className={classes.timeLabel} />;
};
const TickCell = (props) => {
  const classes = useStyles();
  return (
    <WeekView.TimeScaleTickCell {...props} className={classes.timeTableCell} />
  );
};

export default class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: appointments
    };
  }

  render() {
    const { data } = this.state;

    return (
      <Paper>
        <Scheduler data={data}>
          <WeekView
            startDayHour={8}
            endDayHour={13}
            timeTableCellComponent={TimeTableCell}
            timeScaleLabelComponent={TimeLabel}
            timeScaleTickCellComponent={TickCell}
          />
          <Appointments />
          <AppointmentTooltip />
        </Scheduler>
      </Paper>
    );
  }
}

来源（有处置）：https ://codesandbox.io/s/broken-cdn-kv864?file=/demo.js