bpk-component-scrollable-calendar-css
v6.1.13
Published
Backpack scrollable calendar component.
Downloads
115
Keywords
Readme
bpk-component-scrollable-calendar
Backpack scrollable calendar component.
Installation
npm install bpk-component-scrollable-calendar --save-dev
Usage
import React, { Component } from 'react';
import { DateUtils } from 'bpk-component-calendar';
import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from 'bpk-component-scrollable-calendar';
import format from 'date-fns/format';
const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
const formatMonth = date => format(date, 'MMMM yyyy');
const daysOfWeek = [
{
name: 'Sunday',
nameAbbr: 'Sun',
index: 0,
isWeekend: true,
},
// ...
];
export default class App extends Component {
constructor() {
super();
this.state = {
selectionConfiguration: {
type: CALENDAR_SELECTION_TYPE.single,
date: null,
}
};
}
handleDateSelect = (date) => {
this.setState({
selectionConfiguration: {
type: this.props.selectionConfiguration.type,
date: date,
},
});
};
render() {
return (
<BpkScrollableCalendar
id="calendar"
onDateSelect={this.handleDateSelect}
formatMonth={formatMonth}
formatDateFull={formatDateFull}
daysOfWeek={daysOfWeek}
weekStartsOn={1}
selectionConfiguration={this.state.selectionConfiguration}
// Subtract one day from today's date to make today selectable by default
minDate={DateUtils.addDays(new Date(), -1)}
maxDate={DateUtils.addMonths(new Date(), 12)}
/>
);
}
}
BpkScrollableCalendarGridList
This component is the main scrollable grid of months for the scrollable calendar.
It is composed of BpkScrollableCalendarGrid
elements. It uses all the same props
as BpkCalendarGrid
, but in addition minDate
and maxDate
are required to build
the actual list.
Please refer to the props of BpkCalendarGrid here.
| Property | PropType | Required | Default Value | | -------- | -------- | -------- | ------------- | | maxDate | Date | true | - | | minDate | Date | true | - |
BpkScrollableCalendarGrid
The BpkScrollableCalendarGrid component displays a month as a table.
Above this table it displays the month's name in a BpkText
. When
used with BpkScrollableCalendarDate
, it only displays days from
that specific month. It is built on top of BpkCalendarGrid and
uses the same props.
Please refer to the props of BpkCalendarGrid here.
BpkScrollableCalendarDate
The BpkScrollableCalendarDate component is used to render the content of a cell (a single day) inside the calendar grid. It is built on top of BpkCalendarDate and uses the same props. The only difference is that when isOutside is true, null is returned in order to only display of specific month in the calendar grid.