React Big Calendar label - get year in week view

Question

While on week view in React Big Calendar, the label in the toolbar shows the range of dates, for example "January 10 - 16". How can I get the year? Below is the modified toolbar.

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>
    );
  }
}

score 1 · Answer 1 · answered Oct 06 '21 at 20:37

You can do this by providing a custom dayRangeHeaderFormat in the formats prop.

// 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}} />

React Big Calendar label - get year in week view

1 Answers1