使用工作周视图更改一周的第一天

问题描述

我正在尝试通过反应大日历来更改work_week视图的第一天，但​​我没有找到一种方法...我能够更改一周视图的第一天，但​​没有任何帮助工作周...有什么想法吗？

这是我更改周视图第一天的方式：

import "moment/locale/en-gb";

moment.locale("en-gb",{
  week: {
    dow: 0,},});

const localizer = momentLocalizer(moment);

解决方法

不幸的是，唯一的方法是定义一个自定义的“视图”，而不是使用“ work_week”视图。首先，您可以使用“ work_week”视图作为模板来创建“视图”。

import PropTypes from "prop-types";
import React from "react";

import Week from "react-big-calendar/lib/Week";
import TimeGrid from "react-big-calendar/lib/TimeGrid";

function workWeekRange(date,options) {
  return Week.range(date,options).filter(
    (d) => [0,1,6].indexOf(d.getDay()) === -1
  );
}

class MyWorkWeek extends React.Component {
  render() {
    let { date,...props } = this.props;
    let range = workWeekRange(date,this.props);

    return <TimeGrid {...props} range={range} eventOffset={15} />;
  }
}

MyWorkWeek.propTypes = {
  date: PropTypes.instanceOf(Date).isRequired
};

MyWorkWeek.defaultProps = TimeGrid.defaultProps;

MyWorkWeek.range = workWeekRange;

MyWorkWeek.navigate = Week.navigate;

MyWorkWeek.title = (date,{ localizer }) => {
  let [start,...rest] = workWeekRange(date,{ localizer });

  return localizer.format({ start,end: rest.pop() },"dayRangeHeaderFormat");
};

export default MyWorkWeek;

workWeekRange方法中有一个魔术，在那里我定义了要从一周中隐藏的天数（零索引）。在此示例中，我隐藏了周日，周一和周六。

还要注意，我必须更改Week和TimeGrid组件的导入语句。

我要做的最后一件事是提供自定义的“视图”，以及工具栏中按钮的标题。您可以在日历道具中执行此操作。 views属性从标准数组更改为对象。

  return (
    <Calendar
      // other props
      views={{
        day: true,month: true,myweek: MyWorkWeek
      }}
      messages={{
        myweek: 'Work Week'
      }}
    />

您可以看到一个working example in CodeSandbox。