使用工作周视图更改一周的第一天 [英] change the first day of the week with work week view
问题描述
我正在尝试使用 react big calendar 更改 work_week 视图的第一天,但我没有找到方法...我能够更改周视图的第一天,但没有任何帮助工作周……有什么想法吗?
I'm trying to change the first day of the work_week view with react big calendar but I didn't found a way to do it... I was able to change the first day of the week view but nothing helped with work week... any ideas?
这是我如何更改一周的第一天视图:
This is how I changed the first day of the week view:
import "moment/locale/en-gb";
moment.locale("en-gb", {
week: {
dow: 0,
},
});
const localizer = momentLocalizer(moment);
推荐答案
遗憾的是,实现此目的的唯一方法是定义自定义视图",而不是使用work_week"视图.首先,您可以使用work_week"视图作为模板创建视图".
Unfortunately, the only way to do this is by defining a custom 'View', rather than using the 'work_week' view. First you can create the 'View', using the 'work_week' view as a template.
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
方法的神奇之处在于,我定义了要隐藏一周的天数(零索引).在这个例子中,我隐藏了星期日、星期一和星期六.
The magic there is in the workWeekRange
method, where I defined the days (zero index) to hide from the week. In this example I'm hiding Sunday, Monday and Saturday.
另请注意,我必须更改 Week
和 TimeGrid
组件的导入语句.
Also notice that I had to change my import statements for the Week
and TimeGrid
components.
我必须做的最后一件事是提供自定义视图",以及工具栏中按钮的标题.您可以在日历道具中执行此操作.views
属性从标准数组变为对象.
The last thing I had to do was provide the custom 'View', as well as a title for the button in the Toolbar. You do this in your calendar props. The views
prop changes from the standard array to an object.
return (
<Calendar
// other props
views={{
day: true,
month: true,
myweek: MyWorkWeek
}}
messages={{
myweek: 'Work Week'
}}
/>
您可以在 CodeSandbox 中看到 工作示例.
You can see a working example in CodeSandbox.
这篇关于使用工作周视图更改一周的第一天的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!