React Big Calendar 标签 - 在周视图中获取年份答案

【问题标题】：React Big Calendar label - get year in week viewReact Big Calendar 标签 - 在周视图中获取年份
【发布时间】：2021-01-12 20:30:33
【问题描述】：

在 React Big Calendar 的周视图中，工具栏中的标签显示日期范围，例如“1 月 10 日 - 16 日”。我怎样才能得到年份？下面是修改后的工具栏。

export default class CalendarToolbar extends Toolbar {
  componentDidMount() {
    const { view } = this.props;
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <div className="rbc-btn-group">
          <button type="button" onClick={() => this.navigate('PREV')}>back</button>
          <button type="button" onClick={() => this.navigate('NEXT')}>next</button>
        </div>
        <div className="rbc-toolbar-label">{this.props.label}, </div>
        <div className="rbc-btn-group">
          <button type="button" onClick={this.view.bind(null, 'month')}>Month</button>
          <button type="button" onClick={this.view.bind(null, 'week')}>Week</button>
          <button type="button" onClick={this.view.bind(null, 'day')}>Day</button>
          <button type="button" onClick={this.view.bind(null, 'agenda')}>Agenda</button>
        </div>
      </div>
    );
  }
}

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

您可以通过在 formats 属性中提供自定义 dayRangeHeaderFormat 来做到这一点。

// This one is with the `moment` localizer
const dayRangeHeaderFormat = ({ start, end }, culture, local) =>
  local.format(start, 'MMMM DD', culture) +
  ' – ' +
  // updated to use this localizer 'eq()' method
  local.format(end, local.eq(start, end, 'month') ? 'DD YYYY' : 'MMMM DD YYYY', culture)

return <Calendar formats={{dayRangeHeaderFormat}} />

【讨论】：