How to use bpk-component-calendar - 10 common examples

.add('Scrollable Calendar - with focused date', () => (
    
  ))
  .add('Scrollable Calendar in a tall container', () => (

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

* See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* @flow strict */

import {
  BpkCalendarGridHeader,
  withCalendarState,
  composeCalendar,
} from 'bpk-component-calendar';

import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';

export default withCalendarState(
  composeCalendar(
    null,
    BpkCalendarGridHeader,
    BpkScrollableCalendarGridList,
    BpkscrollableCalendarDate,
  ),
);

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* @flow strict */

import {
  BpkCalendarGridHeader,
  withCalendarState,
  composeCalendar,
} from 'bpk-component-calendar';

import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';

export default withCalendarState(
  composeCalendar(
    null,
    BpkCalendarGridHeader,
    BpkScrollableCalendarGridList,
    BpkscrollableCalendarDate,
  ),
);

BpkDatepicker.propTypes = {
  // Required
  changeMonthLabel: PropTypes.string.isRequired,
  closeButtonText: PropTypes.string.isRequired,
  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
  formatDate: PropTypes.func.isRequired,
  formatDateFull: PropTypes.func.isRequired,
  formatMonth: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  getApplicationElement: PropTypes.func.isRequired,
  weekStartsOn: PropTypes.number.isRequired,
  // Optional
  calendarComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  date: PropTypes.instanceOf(Date),
  dateModifiers: CustomPropTypes.DateModifiers,
  inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  markOutsideDays: PropTypes.bool,
  markToday: PropTypes.bool,
  maxDate: PropTypes.instanceOf(Date),
  minDate: PropTypes.instanceOf(Date),
  onDateSelect: PropTypes.func,
  onMonthChange: PropTypes.func,
  showWeekendSeparator: PropTypes.bool,
  initiallyFocusedDate: PropTypes.instanceOf(Date),
  renderTarget: PropTypes.func,
  isOpen: PropTypes.bool,
};

BpkDatepicker.defaultProps = {
  calendarComponent: BpkCalendar,
  date: null,

{...rest}
            >
              {calendar}
            
          )
        }
      
    );
  }
}

BpkDatepicker.propTypes = {
  // Required
  changeMonthLabel: PropTypes.string.isRequired,
  closeButtonText: PropTypes.string.isRequired,
  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
  formatDate: PropTypes.func.isRequired,
  formatDateFull: PropTypes.func.isRequired,
  formatMonth: PropTypes.func.isRequired,
  id: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  getApplicationElement: PropTypes.func.isRequired,
  weekStartsOn: PropTypes.number.isRequired,
  // Optional
  calendarComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
  date: PropTypes.instanceOf(Date),
  dateModifiers: CustomPropTypes.DateModifiers,
  inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
  markOutsideDays: PropTypes.bool,
  markToday: PropTypes.bool,
  maxDate: PropTypes.instanceOf(Date),
  minDate: PropTypes.instanceOf(Date),

.add("Scrollable Calendar - Don't mark today", () => (
    
  ));

const getMonthsArray = (startDate, count) => {
  const months = [];

  for (let i = 0; i < count + 1; i += 1) {
    months.push(DateUtils.addMonths(startDate, i));
  }

  return months;
};
export default getMonthsArray;

],
  },
  {
    id: 'localised',
    title: 'Localised scrollable calendar',
    examples: [
      ,
    ],
  },
  {
    id: 'grid',
    title: 'Scrollable calendar grid',
    examples: [

constructor() {
    super();

    this.minDate = startOfDay(new Date());
    this.maxDate = startOfDay(addMonths(new Date(), 12));
    this.state = {
      departDate: startOfDay(addDays(new Date(), 1)),
      returnDate: startOfDay(addDays(new Date(), 4)),
    };
  }