calendar
v1.10.0arrow_drop_downv1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
1,191
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
28 KB
Calendar provide a simple way to select a single date.
1 contributor
Like
Install calendar as a package?
Copied
npm i @bit/nexxtway.react-rainbow.calendar
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example 
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout

modifieddraft
chevron_left
chevron_right
Calendar base:
import React from 'react';
import { Card, Calendar, Avatar, Picklist, PicklistOption } from 'react-rainbow-components';
initialState = {
date: new Date('2019-12-06 00:00:00'),
locale: { name: 'en-US', label: 'English' },
};
const calendarContainerStyles = {
width: '28rem',
height: '26.5rem',
};
const selectStyles = {
width: '8rem',
};
<div>
<GlobalHeader src="images/user/user2.jpg">
<div className="rainbow-flex rainbow-align_right" style={selectStyles}>
<Picklist value={state.locale} onChange={value => setState({ locale: value })}>
<PicklistOption name="en-US" label="English" />
<PicklistOption name="es-ES" label="EspaC1ol" />
<PicklistOption name="ja" label="f%f,h*" />
<PicklistOption name="fr-Fr" label="FranC'ais" />
<PicklistOption name="zh" label="f%f" />
<PicklistOption name="de" label="Deutsch" />
</Picklist>
</div>
</GlobalHeader>
<div className="rainbow-align-content_center rainbow-m-vertical_large rainbow-p-horizontal_small rainbow-m_auto">
<Card style={calendarContainerStyles} className="rainbow-p-around_large">
<Calendar
id="calendar-1"
locale={state.locale.name}
value={state.date}
onChange={value => setState({ date: value })}
/>
</Card>
</div>
</div>
Calendar with dates contrains:
import React from 'react';
import { Card, Calendar, Avatar } from 'react-rainbow-components';
initialState = { date: new Date('2019-11-11 00:00:00') };
const calendarContainerStyles = {
width: '28rem',
height: '26.5rem',
};
<div>
<header className="rainbow-align-content_space-between rainbow-p-vertical_small rainbow-p-horizontal_medium react-rainbow-golbal-header rainbow-background-color_white">
<img src="images/rainbow-logo.svg" height="40" width="40" alt="rainbow logo" />
<div className="rainbow-flex rainbow-align_center">
<Avatar src="images/user/user3.jpg" variant="circle" />
</div>
</header>
<div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
<Card style={calendarContainerStyles} className="rainbow-p-around_large">
<Calendar
id="calendar-3"
value={state.date}
minDate={new Date(2018, 0, 4)}
maxDate={new Date(2020, 0, 4)}
onChange={value => setState({ date: value })}
/>
</Card>
</div>
</div>
Properties
Name | Type | Default value |
---|---|---|
date | Date | undefined |
firstDayMonth | Date | undefined |
minDate | Date | undefined |
maxDate | Date | undefined |
isSelected | bool | false |
onChange | function | () => {} |
locale | string | undefined |
firstDayMonth | Date | undefined |
minDate | Date | undefined |
maxDate | Date | undefined |
value | Date | string | undefined |
onChange | function | () => {} |
firstDayMonth | Date | undefined |
minDate | Date | undefined |
maxDate | Date | undefined |
startDate | Date | undefined |
endDate | Date | undefined |
value | Date | string | undefined |
onChange | function | () => {} |