我正在尝试使用反应大日历更改工作周视图的第一天,但我没有找到方法...我能够更改一周视图的第一天,但对工作周没有任何帮助...有什么想法吗?
这就是我更改一周第一天视图的方法:
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'
}}
/>
您可以在 CodeSandbox 中看到工作示例。