Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

calendar

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
29
VISIBILITY
Public
PUBLISHED
4 days ago
SIZE
28 KB
Calendar provide a simple way to select a single date.
1 contributor
Use calendar in your project ?
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
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle 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
NameTypeDefault value
date
Dateundefined
firstDayMonth
Dateundefined
minDate
Dateundefined
maxDate
Dateundefined
isSelected
boolfalse
onChange
function() => {}
locale
stringundefined
firstDayMonth
Dateundefined
minDate
Dateundefined
maxDate
Dateundefined
value
Date | stringundefined
onChange
function() => {}
firstDayMonth
Dateundefined
minDate
Dateundefined
maxDate
Dateundefined
startDate
Dateundefined
endDate
Dateundefined
value
Date | stringundefined
onChange
function() => {}