Method renderWeekHeader

src/components/DayPicker.jsx:962–1012

(index)

  }

  renderWeekHeader(index) {
    const {
      daySize,
      horizontalMonthPadding,
      orientation,
      renderWeekHeaderElement,
      styles,
    } = this.props;

    const { calendarMonthWidth } = this.state;

    const verticalScrollable = orientation === VERTICAL_SCROLLABLE;

    const horizontalStyle = {
      left: index * calendarMonthWidth,
    };
    const verticalStyle = {
      marginLeft: -calendarMonthWidth / 2,
    };

    let weekHeaderStyle = {}; // no styles applied to the vertical-scrollable orientation
    if (this.isHorizontal()) {
      weekHeaderStyle = horizontalStyle;
    } else if (this.isVertical() && !verticalScrollable) {
      weekHeaderStyle = verticalStyle;
    }

    const weekHeaders = this.getWeekHeaders();
    const header = weekHeaders.map((day) => (
      <li key={day} {...css(styles.DayPicker_weekHeader_li, { width: daySize })}>
        {renderWeekHeaderElement ? renderWeekHeaderElement(day) : <small>{day}</small>}
      </li>
    ));

    return (
      <div
        {...css(
          styles.DayPicker_weekHeader,
          this.isVertical() && styles.DayPicker_weekHeader__vertical,
          verticalScrollable && styles.DayPicker_weekHeader__verticalScrollable,
          weekHeaderStyle,
          { padding: `0 ${horizontalMonthPadding}px` },
        )}
        key={`week-${index}`}
      >
        <ul {...css(styles.DayPicker_weekHeader_ul)}>
          {header}
        </ul>
      </div>
    );
  }

  render() {
    const {