Calendar

A simple Calendar input for selecting individual dates.

import Calendar from "react-widgets/Calendar"; <Calendar />;

import Calendar from "react-widgets/Calendar";
<Calendar />;

Keyboard Shortcuts

Calendar implements many keyboard shortcuts for power or keyboard only users.

ctrl + down arrow

navigate to next view

ctrl + up arrow

navigate to previous view

ctrl + left arrow

navigate to previous: month, year, decade, or century

ctrl + right arrow

navigate to next: month, year, decade, or century

left arrow

move focus to previous dat

right arrow

move focus to next date

up arrow

move focus up within view

down key

move focus down within view

API

autoFocus

Pass focus to the Calendar when it mounts.

type: boolean

bordered

type: boolean

default:true

culture

Set the culture of the Calendar, passed to the configured localizer.

type: string

currentDate

Default current date at which the calendar opens. If none is provided, opens at today's date or the value date (if any).

type: Date

defaultCurrentDate

type: Date

defaultValue

type: Date

defaultView

type: 'month''year''decade''century'

default:views[0]

disabled

<Calendar disabled defaultValue={new Date()} />

<Calendar
  disabled
  defaultValue={new Date()}
/>

type: boolean

footer

A formatter for the Calendar footer, formats today's Date as a string.

@example ['dateFormat', ['footerFormat', "{ date: 'medium' }", "date => 'Today is: ' + formatter(date)"]]

type: boolean

formats

type: DateFormats<InferFormat<TLocalizer>>

max

The maximum date that the Calendar can navigate to.

<Calendar max={new Date()} />;

<Calendar 
  max={new Date()}
/>;

type: Date

default:new Date(2099, 11, 31)

messages

Object hash containing display text and/or text for screen readers. Use the messages object to localize widget text or provide custom rendering.

type: { moveBack?: string moveForward?: string moveToday?: string }

min

The minimum date that the Calendar can navigate from.

<Calendar min={new Date()} />;

<Calendar 
  min={new Date()}
/>;

type: Date

default:new Date(1900, 0, 1)

navigateNextIcon

Specify the navigate into the future header icon

type: node

navigatePrevIcon

Specify the navigate into the past header icon

type: node

onChange

A callback fired when the current value changes.

function ChangeExample({ initialValue }) { const [value, setValue] = useState(initialValue) return ( <Calendar value={value} onChange={value => setValue(value)} /> ) } <ChangeExample initialValue={new Date()} />

function ChangeExample({ initialValue }) {
  const [value, setValue] = useState(initialValue)
  return (
    <Calendar
      value={value}
      onChange={value => setValue(value)}
    />
  )
}
<ChangeExample initialValue={new Date()} />

type: (nextValue: Date) => void

onCurrentDateChange

Change event Handler that is called when the currentDate is changed. The handler is called with the currentDate object.

type: (nextDate: Date) => void

onKeyDown

The native onKeyDown event, called preventDefault will prevent any custom behavior, included keyboard shortcuts.

type: function

onNavigate

Callback fired when the Calendar navigates between views, or forward and backwards in time.

type: function(date: ?Date, direction: string, view: string)

onViewChange

A callback fired when the view changes.

type: (nextView: 'month''year''decade''century') => void

readOnly

Controls the read-only state of the Calendar.

<Calendar readOnly defaultValue={new Date()} />

<Calendar
  readOnly
  defaultValue={new Date()}
/>

type: boolean

renderDay

Provide a custom component to render the days of the month. The Component is provided the following props

• date: a Date object for the day of the month to render
• label: a formatted string of the date to render. To adjust the format of the label string use the dateFormat prop, listed below.

type: RenderDayProp

value

The selected Date.

<Calendar value={new Date()} />

<Calendar value={new Date()} />

type: Datenull

view

Controls the currently displayed calendar view. Use defaultView to set a unique starting view.

class Example extends React.Component { constructor(...args) { super(...args) this.state = { view: 'decade' }; } render() { let onViewChange = view => this.setState({ view }) return ( <div className='max-w-xs'> <Calendar view={this.state.view} onViewChange={onViewChange} /> <Calendar defaultView="year" /> </div> ) } } render(<Example />);

class Example extends React.Component {
  constructor(...args) {
    super(...args)
    this.state = { view: 'decade' };
  }
  render() {
    let onViewChange = view => this.setState({ view })
    return (
      <div className='max-w-xs'>
        <Calendar
          view={this.state.view}
          onViewChange={onViewChange}
        />
        <Calendar defaultView="year" />
      </div>
    )
  }
}
 render(<Example />);

type: {("month"|"year"|"decade"|"century")}

views

Defines a list of views the Calendar can traverse through, starting with the first in the list to the last.

let widget = ( <Calendar views={['year', 'decade']} /> ) render(widget);

let widget = (
  <Calendar views={['year', 'decade']} />
)
render(widget);

type: array<"month"|"year"|"decade"|"century">

default:['month', 'year', 'decade', 'century']