furl
Getting startedDesignComponents
Design
Design GuidelinesTypography SystemLayout SystemColor palettesCustomization
Components
ComponentsAccordionAlertAnchorAudioAvatarBadgeBreadcrumbsButtonButtonGroupCalendarCardCollapseContextButtonDividerDropdownFooterFormGraphGridHyperlinkIconIframeImageInputItemLayoutListLoaderMediaObjectMenuModalNotificationPaginationPopoverProgressSearchStepsSwitchTableTabsTooltipTypographyVideo

Calendar

Calendars provide a visual representation of dates on a grid.

Examples

January 2020
SUN
MON
TUE
WED
THU
FRI
SAT
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import { Calendar } from 'furl-components';

ReactDOM.render(
  <Calendar 
    date={new Date('01/01/2020')} 
    fill='solid'
    onDateChanged={(date) => console.log(date)}
  />, 
  document.getElementById('root')
);

API

Calendar props
Property Description Type Default
date calendar selected date Date
fill fill style string 'flat'
onDateChanged calendar ondatechanged event function

Notes

  • If date is not of type Date, the component will try to convert it to a usable Date object.
  • If date is not provided, the component will use the current date.
  • fill can be either 'flat' or 'solid'.
  • onDateChanged does not behave exactly like a normal event. Instead, the callback function will only be passed one argument, the value of the newly selected date.

furl was designed and developed by Angelos Chalaris © 2019
Documentation generated using Gatsby, hosting by Netlify