How to use the bpk-component-calendar.DateUtils.differenceInCalendarMonths function in bpk-component-calendar

To help you get started, we’ve selected a few bpk-component-calendar examples, based on popular ways it is used in public projects.

github Skyscanner / backpack / packages / bpk-component-scrollable-calendar / src / BpkScrollableCalendarGridList.js View on Github external
constructor(props) {
    super(props);

    this.outerDiv = null;

    const startDate = startOfDay(startOfMonth(this.props.minDate));
    const endDate = startOfDay(startOfMonth(this.props.maxDate));
    const monthsCount = DateUtils.differenceInCalendarMonths(
      endDate,
      startDate,
    );
    const months = getMonthsArray(startDate, monthsCount);
    // Here we calculate the height of each calendar grid item in pixels, as the `react-window` API
    // requires that these are provided so that they can be efficiently rendered.
    const monthItemHeights = months.map(month => {
      const firstDayOffset = (month.getDay() + 7 - props.weekStartsOn) % 7;
      const monthLength = DateUtils.daysInMonth(
        month.getYear(),
        month.getMonth(),
      );
      const calendarGridSpaces = firstDayOffset + monthLength;
      const rowCount = Math.ceil(calendarGridSpaces / COLUMN_COUNT);
      return BASE_MONTH_ITEM_HEIGHT + ROW_HEIGHT * rowCount;
    });
github Skyscanner / backpack / packages / bpk-component-scrollable-calendar / src / BpkScrollableCalendarGridList.js View on Github external
this.getHtmlElement().dir === 'rtl' ? { direction: 'rtl' } : {}
          }
          width="100%"
          height={this.state.outerHeight}
          estimatedItemSize={ESTIMATED_MONTH_ITEM_HEIGHT}
          itemSize={this.getItemSize}
          itemCount={this.state.months.length}
          rowCount={this.state.months.length}
          overscanCount={1}
          initialScrollOffset={this.calculateOffsetInPixels(
            isSameMonth(this.props.focusedDate, this.props.selectedDate)
              ? DateUtils.differenceInCalendarMonths(
                  this.props.selectedDate,
                  this.props.minDate,
                )
              : DateUtils.differenceInCalendarMonths(
                  this.props.focusedDate,
                  this.props.minDate,
                ),
          )}
        >
          {this.rowRenderer}
        </List>
      </div>
    );
  }
}
github Skyscanner / backpack / packages / bpk-component-scrollable-calendar / src / BpkScrollableCalendarGridList.js View on Github external
>
        <List
          extraData={this.props}
          style={
            this.getHtmlElement().dir === 'rtl' ? { direction: 'rtl' } : {}
          }
          width="100%"
          height={this.state.outerHeight}
          estimatedItemSize={ESTIMATED_MONTH_ITEM_HEIGHT}
          itemSize={this.getItemSize}
          itemCount={this.state.months.length}
          rowCount={this.state.months.length}
          overscanCount={1}
          initialScrollOffset={this.calculateOffsetInPixels(
            isSameMonth(this.props.focusedDate, this.props.selectedDate)
              ? DateUtils.differenceInCalendarMonths(
                  this.props.selectedDate,
                  this.props.minDate,
                )
              : DateUtils.differenceInCalendarMonths(
                  this.props.focusedDate,
                  this.props.minDate,
                ),
          )}
        >
          {this.rowRenderer}
        </List>
      </div>
    );
  }
}