Top
Calendar API - API
Calendar API
Props (43)
Callback Props (17)
Styling Props (2)
Methods (1)
Bool
default: false
Whether to change activeDate while mouse is moving over days.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      activateOnHover: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.activateOnHover}
          onChange={(activateOnHover) => this.setState({ activateOnHover })}
        >
          Activate on hover
        </CheckBox>
      </div>
      <div>
        <Calendar activateOnHover={this.state.activateOnHover} />
      </div>
    </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Specifies the active date for the component.
Active date can be changed with keyboard arrows.
This is a controlled prop, react will change this with onActiveDateChange.
For uncontrolled behaviour, see defaultActiveDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { activeDate: null }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The active date is: {this.state.activeDate}
      </div>
      <Calendar
        activeDate={this.state.activeDate}
        onActiveDateChange={(date) => {
          this.setState({ activeDate: date })
        }}
      />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to show the last week from the preview month.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      alwaysShowPrevWeek: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.alwaysShowPrevWeek}
          onChange={(alwaysShowPrevWeek) => this.setState({ alwaysShowPrevWeek })}
        >
        Always show preview week
        </CheckBox>
      </div>
      <Calendar defaultDate="2018-07-01" alwaysShowPrevWeek={this.state.alwaysShowPrevWeek} />
    </div>
  }
}

export default () => <App />
Bool
default: false
Whether to render cancel button.
For this prop to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      cancelButton: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.cancelButton}
          onChange={(cancelButton) => this.setState({ cancelButton })}
        >
          Cancel button
        </CheckBox>
      </div>
      <Calendar cancelButton={this.state.cancelButton} footer />
    </div>
  }
}

export default () => <App />
React.Node
default: "Cancel"
Content inside cancel button.
For this prop to have effect footer and cancelButton must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      text: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.text}
          onChange={(text) => this.setState({ text })}
        >
          Custom cancel button text
        </CheckBox>
      </div>
      <Calendar
        footer
        cancelButton
        cancelButtonText={this.state.text ? 'Discard' : 'Cancel'}
      />
    </div>
  }
}

export default () => <App />
Bool
default: null
Whether to render clear button inside Footer.
Prop passed to Footer subcomponent as clearDate.
For this props to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      clearButton: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.clearButton}
          onChange={(clearButton) => this.setState({ clearButton })}
        >
          Clear button
        </CheckBox>
      </div>
    <Calendar footer clearButton={this.state.clearButton} />
  </div>
  }
}

export default () => <App />
Bool
default: false
Whether when changing activeDate with keyboard, to allow it to change to a date in previous or next month.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      constrainActiveInView: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.constrainActiveInView}
          onChange={(constrainActiveInView) => this.setState({ constrainActiveInView })}
        >
          Constrain active in view
        </CheckBox>
      </div>
    <Calendar constrainActiveInView={this.state.constrainActiveInView} />
  </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Specifies the date for the component.
This is a controlled prop, react will change this with onChange.
For uncontrolled behaviour, see defaultDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { date: null }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>Current date is: {this.state.date}</div>
      <Calendar
        dateFormat="DD-MM-YYYY"
        onChange={(date) => {
          this.setState({ date })
        }}
        date={this.state.date}
      />
    </div>
  }
}

export default () => <App />
String
default: "YYYY-MM-DD"
Specifies format for date text. For more information see moment format.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const dataSource = ['YYYY-MM-DD', 'YYYY-DD-MM', 'DD-YYYY-MM', 'MM-YYYY-DD', 'DD-MM-YYYY', 'MM-DD-YYYY'].map((format) => {
  return {
    id: format,
    label: 'Format: ' + '"' + format + '"'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      date: null,
      dateFormat: 'DD-MM-YYYY'
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Date format: {' '}
        <ComboBox
          inlineFlex
          collapseOnSelect
          changeValueOnNavigation
          style={{ width: 220 }}
          dataSource={dataSource}
          value={this.state.dateFormat}
          onChange={(value) => this.setState({ dateFormat: value }) }
        />
      </div>
      <code>dateFormat={this.state.dateFormat}: {this.state.date}</code><br />
      <Calendar
        dateFormat={this.state.dateFormat}
        onChange={date => this.setState({ date })}
      />
    </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Specifies initial active date for the component.
For controlled behaviour, see activeDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  defaultDate={'2017-05-09'}
  defaultActiveDate={'2017-05-12'}
/>
Date|String|Number|Moment
default: undefined
Specifies the initial date for the component.
For controlled behaviour, see date.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  defaultDate={'2017-05-09'}
/>
[rangeStart: Date|String|Number|Moment, endRange: Date|String|Number|Moment]
default: undefined
Specifies initial hover range for the component.
For this prop to have effect highlightRangeOnMouseMove must be true and range or defaultRange must be defined.
For controlled behaviour, see hoverRange.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  defaultRange={['', '']}
  highlightRangeOnMouseMove
  defaultHoverRange={['2017-05-01', '2017-05-10']}
  viewDate='2017-05-01'
/>
[rangeStart: Date|String|Number|Moment, endRange: Date|String|Number|Moment]
default: undefined
Specifies initial date range for the component.
For controlled behaviour, see range.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  defaultRange={['2017-05-01', '2017-05-10']}
  viewDate='2017-05-01'
/>
Date|String|Number|Moment
default: undefined
Specifies which month should initially be visible.
For controlled behaviour, see viewDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  defaultViewDate={'2017-07-05'}
/>
Bool
default: true
Whether to render MonthDecadeView when navigation title is clicked.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableMonthDecadeView: true
    }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <CheckBox
        checked={this.state.enableMonthDecadeView}
        onChange={(enableMonthDecadeView) => this.setState({ enableMonthDecadeView })}
      >
        Enable month-decade view
      </CheckBox>
    </div>
    <Calendar enableMonthDecadeView={this.state.enableMonthDecadeView} />
  </div>
  }
}

export default () => <App />
Enables the month-decade view modal to show with an fade-in animation. By default is true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enableMonthDecadeViewAnimation: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableMonthDecadeViewAnimation}
          onChange={(enableMonthDecadeViewAnimation) => this.setState({ enableMonthDecadeViewAnimation })}
        >
          Enable month decade view animation
        </CheckBox>
      </div>
    <Calendar enableMonthDecadeViewAnimation={this.state.enableMonthDecadeViewAnimation} />
  </div>
  }
}

export default () => <App />
Bool
default: true
Focus MonthView, when DatePickerFooter is clicked.
It works only with footer prop set to true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.onFocus = this.onFocus.bind(this)
    this.onBlur = this.onBlur.bind(this)

    this.state = {
      focusOnFooterMouseDown: true,
      focused: false
    }
  }

  onFocus(event) {
    this.setState({
      focused: true
    })
  }

  onBlur(event) {
    this.setState({
      focused: false
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.focusOnFooterMouseDown}
          onChange={(focusOnFooterMouseDown) => this.setState({ focusOnFooterMouseDown })}
        >
          Focus on footer mouse down
        </CheckBox>
      </div>
      <p>Press on the footer buttons to see the effect.</p>
      <div style={{ marginBottom: 20 }}>
        The <code>MonthView</code> is{' '}
          {
            this.state.focused ?
            <span style={focusedStyle}>focused</span> :
            <span style={unfocusedStyle}>unfocused</span>
          }.
      </div>
    <Calendar
      footer
      ref={date => this.datePicker = date}
      focusOnFooterMouseDown={this.state.focusOnFooterMouseDown}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    />
  </div>
  }
}

export default () => <App />
Bool
default: true
Focus MonthView when DatePickerNavBar is clicked.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.onFocus = this.onFocus.bind(this)
    this.onBlur = this.onBlur.bind(this)

    this.state = {
      focusOnNavMouseDown: true,
      focused: false
    }
  }

  onFocus(event) {
    this.setState({
      focused: true
    })
  }

  onBlur(event) {
    this.setState({
      focused: false
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.focusOnNavMouseDown}
          onChange={(focusOnNavMouseDown) => this.setState({ focusOnNavMouseDown })}
        >
          Focus on navBar mouse down
        </CheckBox>
      </div>
      <p>Press on the navBar to see the effect.</p>
      <div style={{ marginBottom: 20 }}>
        The <code>MonthView</code> is{' '}
          {
            this.state.focused ?
            <span style={focusedStyle}>focused</span> :
            <span style={unfocusedStyle}>unfocused</span>
          }.
      </div>
    <Calendar
      footer
      ref={date => this.datePicker = date}
      focusOnNavMouseDown={this.state.focusOnNavMouseDown}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    />
  </div>
  }
}

export default () => <App />
Bool
default: false
Whether to render a footer to the bottom of the calendar.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      footer: true
    }
  }

  render() {
    return <div>
    <div style={{ marginBottom: 20 }}>
      <CheckBox
        checked={this.state.footer}
        onChange={(footer) => this.setState({ footer })}
      >
        Footer
      </CheckBox>
    </div>
    <Calendar footer={this.state.footer} />
  </div>
  }
}

export default () => <App />
Bool
default: false
When selecting a range after the start was selected, whether to show a preview of the range created if the day under the mouse is clicked.
Props asociated with this preview range are: hoverRange, defaultHoverRange and onHoverRangeChange
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlightRangeOnMouseMove: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.highlightRangeOnMouseMove}
          onChange={(highlightRangeOnMouseMove) => this.setState({ highlightRangeOnMouseMove })}
        >
          Highlight range on mouse move
        </CheckBox>
      </div>
    <Calendar
      defaultRange={[]}
      highlightRangeOnMouseMove={this.state.highlightRangeOnMouseMove}
    />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to highlight today's date.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlightToday: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.highlightToday}
          onChange={(highlightToday) => this.setState({ highlightToday })}
        >
          Highlight today
        </CheckBox>
      </div>
    <Calendar highlightToday={this.state.highlightToday} />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to highlight weekends.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      highlightWeekends: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.highlightWeekends}
          onChange={(highlightWeekends) => this.setState({ highlightWeekends })}
        >
          Highlight weekends
        </CheckBox>
      </div>
    <Calendar highlightWeekends={this.state.highlightWeekends} />
  </div>
  }
}

export default () => <App />
[rangeStart: Date|String|Number|Moment, endRange: Date|String|Number|Moment]
default: undefined
Controlls the hover range for the component.
This range is used as a preview before setting the endRange for the range.
This is a controlled prop, react will change this with onHoverRangeChange.
For this prop to have effect, highlightRangeOnMouseMove must be trueand range or defaultRange must be defined.
For uncontrolled behaviour, see defaultHoverRange.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hoverRange: []
    }
  }
  render() {
    const { hoverRange } = this.state

    return <div>
      <p>
        The hovered rage is: {JSON.stringify(hoverRange)}
      </p>
      <Calendar
        defaultRange={[]}
        highlightRangeOnMouseMove
        hoverRange={this.state.hoverRange}
        onHoverRangeChange={(hoverRange) => {
          this.setState({ hoverRange })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn(dayProps, props)
default: undefined
A function that decides whether a day is disabled.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const isDisabledDay = (dayProps) => {
  return ['1', '2', '20'].indexOf(dayProps.day) !== -1
}

export default () => <div>
  <p>
    The day 1, 2 and 20 are disabled.
  </p>
  <Calendar isDisabledDay={isDisabledDay} defaultViewDate={1494246126721}  />
</div>
Date|String|Number|Moment
default: undefined
Defines max allowed date. Asociated with minDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  maxDate={'2017-05-20'}
  defaultViewDate='2017-05-01'
/>
Date|String|Number|Moment
default: undefined
Defines min allowed date. Asociated with maxDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  minDate={'2017-05-05'}
  defaultViewDate='2017-05-01'
/>
{prev: React.Node, next: React.Node}
default: undefined
Customize next and previous navigation arrows.
This props is passed as arrows to DatePickerNavBar.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const arrowStyle = {
  fontSize: 20,
  fontWeight: 400
};
const navBarArrows = {
  prev: (
    <div>
      <svg fill="#ff0000" height="24" viewBox="0 0 24 24" width="24">
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>
  ),
  next: (
    <div>
      <svg fill="#ff0000" height="24" viewBox="0 0 24 24" width="24">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
    </div>
  ),
  left: (
    <div>
      <svg width="13" height="11" viewBox="0 0 13 11">
        <g fill="#008000" fillRule="evenodd">
          <polyline points="6.793 9.707 2.594 5.5 6.793 1.292 5.5 0 0 5.5 5.5 11 6.793 9.707" />
          <polyline points="12.793 9.707 8.594 5.5 12.793 1.292 11.5 0 6 5.5 11.5 11 12.793 9.707" />
        </g>
      </svg>
    </div>
  ),
  right: (
    <div>
      <svg width="13" height="11" viewBox="0 0 13 11">
        <g fill="#008000" fillRule="evenodd">
          <polygon points="4.198 5.5 0 1.292 1.292 0 6.793 5.5 1.292 11 0 9.707" />
          <polyline points="6 9.707 10.198 5.5 6 1.292 7.293 0 12.793 5.5 7.293 11 6 9.707" />
        </g>
      </svg>
    </div>
  )
};

export default () => <Calendar navBarArrows={navBarArrows} />
Bool
default: true
Wheter to render a header with arrow navigation.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      navigation: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.navigation}
          onChange={(navigation) => this.setState({ navigation })}
        >
          Navigation
        </CheckBox>
      </div>
    <Calendar navigation={this.state.navigation} />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to navigate to next/previous month when a day is clicked outside current displayed month.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      navOnDateClick: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.navOnDateClick}
          onChange={(navOnDateClick) => this.setState({ navOnDateClick })}
        >
          Navigation on date click
        </CheckBox>
      </div>
    <Calendar navOnDateClick={this.state.navOnDateClick} />
  </div>
  }
}

export default () => <App />
Bool
default: false
Whether to render ok button.
For this prop to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      okButton: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.okButton}
          onChange={(okButton) => this.setState({ okButton })}
        >
          OK button
        </CheckBox>
      </div>
    <Calendar footer okButton={this.state.okButton} />
  </div>
  }
}

export default () => <App />
React.Node|String
default: "cancel"
Content inside cancel button.
For this prop to have effect footer and okButton must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      okButtonText: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.okButtonText}
          onChange={(okButtonText) => this.setState({ okButtonText })}
        >
          Set a custom text for ok button
        </CheckBox>
      </div>
    <Calendar
      footer
      okButton
      okButtonText={
        this.state.okButtonText ? 'Approved' : undefined
      }
    />
  </div>
  }
}

export default () => <App />
Bool
default: true
Prop passed to DatePickerFooter subcomponent as clearDate.
For this prop to have effect, range or defaultRange must be defined.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      partialRange: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.partialRange}
          onChange={(partialRange) => this.setState({ partialRange })}
        >
          Partial range
        </CheckBox>
      </div>
    <Calendar
      footer
      highlightRangeOnMouseMove
      defaultRange={[]}
      partialRange={this.state.partialRange}
    />
  </div>
  }
}

export default () => <App />
[rangeStart: Date|String|Number|Moment, endRange: Date|String|Number|Moment]
default: undefined
Specifies the date range for the component.
This is a controlled prop, react will change this with onRangeChange.
For uncontrolled behaviour, see defaultRange.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { range: [] }
  }
  render() {
    const { range } = this.state

    return <div>
      <p>
        The selected range is: {JSON.stringify(range)}.
      </p>
      <Calendar
        range={this.state.range}
        onRangeChange={(range) => {
          this.setState({ range })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn(children: React.Node[])
default: undefined
Children is an array of:
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'
import DatePickerNavBar from '@zippytech/react-toolkit/DatePickerNavBar'

const renderChildren = (children) => {
  return <div style={{ display: 'flex', flexDirection: 'column' }}>
    {children[0]}
    <h4 style={{ textAlign: 'center' }}>
      Select birthday
    </h4>
    {children.slice(1)}
  </div>
}

export default (navBarProps) => <div>
  <Calendar renderChildren={renderChildren} />
</div>
Fn(navBarProps)
default: undefined
Customize render of MonthView navigation. DatePickerNavBar subcomponent can be used.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'
import DatePickerNavBar from '@zippytech/react-toolkit/DatePickerNavBar'

const renderNavBar = (navBarProps) => {
  return <div style={{ display: 'flex', flexDirection: 'column' }}>
    <h4 style={{ textAlign: 'center' }}>
      Select birthday
    </h4>
    <DatePickerNavBar {...navBarProps} />
  </div>
}

export default (navBarProps) => <div>
  <Calendar renderNavBar={renderNavBar}  />
</div>
Bool
default: true
This prop is supported by Calendar and DateInput components, and it renders a clock either inside the dropdown or next to calendar.
For Clock to work, dateFormat must include time.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showClock: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showClock}
          onChange={(showClock) => this.setState({ showClock })}
        >
          Show clock
        </CheckBox>
      </div>
    <Calendar
      showClock={this.state.showClock}
      dateFormat="YYYY-MM-DD HH:mm:ss"
    />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to render days from next mounth in empty spaces.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showDaysAfterMonth: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showDaysAfterMonth}
          onChange={(showDaysAfterMonth) => this.setState({ showDaysAfterMonth })}
        >
          Show days after month
        </CheckBox>
      </div>
    <Calendar showDaysAfterMonth={this.state.showDaysAfterMonth} />
  </div>
  }
}

export default () => <App />
Bool
default: true
Whether to render days from previous mounth in empty spaces.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showDaysBeforeMonth: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.showDaysBeforeMonth}
          onChange={(showDaysBeforeMonth) => this.setState({ showDaysBeforeMonth })}
        >
          Show days before month
        </CheckBox>
      </div>
    <Calendar showDaysBeforeMonth={this.state.showDaysBeforeMonth} />
  </div>
  }
}

export default () => <App />
Duration in milliseconds of showing the month-decade view component.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import ComboBox from '@zippytech/react-toolkit/ComboBox'
import '@zippytech/react-toolkit/ComboBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const dataSource = [300, 600, 900, 1200, 1800, 3000].map((number) => {
  return {
    id: number,
    label: 'Duration: ' + number + 'ms'
  }
})

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      showMonthDecadeViewAnimation: 300
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <ComboBox
          style={{width: 200}}
          collapseOnSelect
          changeValueOnNavigation
          dataSource={dataSource}
          value={this.state.showMonthDecadeViewAnimation}
          onChange={(value) => this.setState({ showMonthDecadeViewAnimation: value })}
        />
      </div>
    <Calendar showMonthDecadeViewAnimation={this.state.showMonthDecadeViewAnimation} />
  </div>
  }
}

export default () => <App />
Bool
default: true
<Calendar /> uses Momentjs to manipulate dates. This props is passed to momentjs, and refers to strict date parsing.
bool
default: true
Whether to change the value from the clock input on mouse wheel.
This prop works with showClock set to true or the dateFormat includes 'hh:mm:ss' in its format date text. For more details, see Momentjs format.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      updateOnWheel: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.updateOnWheel}
          onChange={(updateOnWheel) => this.setState({ updateOnWheel })}
        >
          Update on wheel
        </CheckBox>
      </div>
    <Calendar
      showClock
      dateFormat="DD-MM-YYYY hh:mm:ss"
      updateOnWheel={this.state.updateOnWheel}
    />
  </div>
  }
}

export default () => <App />
Date|String|Number|Moment
default: undefined
Specifies which month should be visible.
This is a controlled prop, react will change this with onViewDateChange.
For uncontrolled behaviour, see defaultViewDate.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { viewDate: null }
  }
  render() {
    return <div>
      <p>
        View date is: {this.state.viewDate || 'no date'}
      </p>
      <Calendar
        onViewDateChange={(viewDate) => {
          this.setState({ viewDate })
        }}
        viewDate={this.state.viewDate}
      />
    </div>
  }
}

export default () => <App />
Bool
default: true
Prop used to show/hide the last week of the previous month.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      weekNumbers: true
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.weekNumbers}
          onChange={(weekNumbers) => this.setState({ weekNumbers })}
        >
          Week numbers
        </CheckBox>
      </div>
    <Calendar weekNumbers={this.state.weekNumbers} />
  </div>
  }
}

export default () => <App />
Fn(dateString, { dateMoment, timestamp, dateString })
default: undefined
Called when activeDate changes.
It is called with the following params:
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { activeDate: null }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The active date is: {this.state.activeDate}.
      </div>
      <Calendar
        activeDate={this.state.activeDate}
        onActiveDateChange={(date) => {
          this.setState({ activeDate: date })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the component loses focus.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.onFocus = this.onFocus.bind(this)
    this.onBlur = this.onBlur.bind(this)

    this.state = {
      focused: false
    }
  }

  onFocus(event) {
    this.setState({
      focused: true
    })
  }

  onBlur(event) {
    this.setState({
      focused: false
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The <code>Calendar</code> is{' '}
          {
            this.state.focused ?
            <span style={focusedStyle}>focused</span> :
            <span style={unfocusedStyle}>blurred</span>
          }.
      </div>
    <Calendar
      ref={date => this.datePicker = date}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    />
  </div>
  }
}

export default () => <App />
Fn(dateString, { dateMoment, timestamp, dateString }, event)
default: undefined
Called when date changes.
It is called with the following params:
  • dateString: String - date in dateFormat.
  • dateInfo: Object - more information about the new date.
    • dateMoment: Moment - date as Moment instance.
    • timestamp: String - date in ms.
    • dateString: String - same as first param.
  • event - onClick event that triggered date change.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { date: null }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>Changed date is: {this.state.date || 'no date'}.</div>
      <Calendar
        dateFormat="DD-MM-YYYY"
        onChange={(date) => {
          this.setState({ date })
        }}
        date={this.state.date}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when Enter key is pressed on clock input.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      enter: false
    }
  }

  render() {
    return <div>
      <p>To see the effect of the prop, clock input should be focused.</p>
      {this.state.enter ? <div style={{ color: '#ff6677' }}>Enter key was pressed!</div> : null}
      <Calendar
        showClock
        dateFormat="DD-MM-YYYY hh:mm:ss"
        onClockEnterKey={() => this.setState({ enter: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when Escape key is pressed on clock input.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      escape: false
    }
  }

  render() {
    return <div>
      <p>To see the effect of the prop, clock input should be focused.</p>
      {this.state.escape ? <div style={{ color: '#ff6677' }}>Escape key was pressed!</div> : null}
      <Calendar
        showClock
        dateFormat="DD-MM-YYYY hh:mm:ss"
        onClockEscapeKey={() => this.setState({ escape: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when clock input is blurred.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      focused: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Clock input is: {this.state.focused ?
          <span style={focusedStyle}>focused</span> :
          <span style={unfocusedStyle}>blurred</span>
        }!
      </div>
      <Calendar
        showClock
        dateFormat="DD-MM-YYYY hh:mm:ss"
        onClockInputBlur={() => this.setState({ focused: false })}
        onClockInputFocus={() => this.setState({ focused: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when clock input is focused.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      focused: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Clock input is: {this.state.focused ?
          <span style={focusedStyle}>focused</span> :
          <span style={unfocusedStyle}>blurred</span>
        }!
      </div>
      <Calendar
        showClock
        dateFormat="DD-MM-YYYY hh:mm:ss"
        onClockInputBlur={() => this.setState({ focused: false })}
        onClockInputFocus={() => this.setState({ focused: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the component receives focus.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.onFocus = this.onFocus.bind(this)
    this.onBlur = this.onBlur.bind(this)

    this.state = {
      focused: false
    }
  }

  onFocus(event) {
    this.setState({
      focused: true
    })
  }

  onBlur(event) {
    this.setState({
      focused: false
    })
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        The <code>Calendar</code> is{' '}
          {
            this.state.focused ?
            <span style={focusedStyle}>focused</span> :
            <span style={unfocusedStyle}>blurred</span>
          }.
      </div>
    <Calendar
      ref={date => this.datePicker = date}
      onFocus={this.onFocus}
      onBlur={this.onBlur}
    />
  </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the DatePickerNavBar clear button is clicked.
For this prop to have effect, footer and clearButton must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      cancel: false
    }
  }

  render() {
    return <div >
      {this.state.cancel ? <div style={{color: '#ff6677'}}>Cancel button was clicked!</div> : null}
      <Calendar
        footer
        cancelButton
        onFooterCancelClick={() => this.setState({ cancel: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the DatePickerNavBar clear button is clicked.
For this prop to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      clear: false
    }
  }

  render() {
    return <div >
      {this.state.clear ? <div style={{color: '#ff6677'}}>Clear button was clicked!</div> : null}
      <Calendar
        footer
        clearButton
        onFooterClearClick={() => this.setState({ clear: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the DatePickerNavBar Ok button is clicked.
For this prop to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      ok: false
    }
  }

  render() {
    return <div >
      {this.state.ok ? <div style={{color: '#ff6677'}}>OK button was clicked!</div> : null}
      <Calendar
        footer
        okButton
        onFooterOkClick={() => this.setState({ ok: true })}
      />
    </div>
  }
}

export default () => <App />
Fn()
default: undefined
Called when the DatePickerNavBar today button is clicked.
For this prop to have effect footer must be true.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      today: false
    }
  }

  render() {
    return <div >
      {this.state.today ? <div style={{color: '#ff6677'}}>Today button was clicked!</div> : null}
      <Calendar
        footer
        onFooterTodayClick={() => this.setState({ today: true })}
      />
    </div>
  }
}

export default () => <App />
Fn([rangeStart: Moment, endRange: Moment], event)
default: undefined
Called when hoverRange changes.
It is called with the following params:
  • range
  • event - on click event that triggered range change
For this prop to have effect, highlightRangeOnMouseMove must be true and range or defaultRange must be defined.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hoverRange: []
    }
  }
  render() {
    const { hoverRange } = this.state

    return <div>
      <p>
        The hovered rage is: {JSON.stringify(hoverRange)}
      </p>
      <Calendar
        defaultRange={[]}
        highlightRangeOnMouseMove
        hoverRange={this.state.hoverRange}
        onHoverRangeChange={(hoverRange) => {
          this.setState({ hoverRange })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn([rangeStart: Moment, endRange: Moment], event)
default: undefined
Called when range changes.
It is called with the following params:
  • range
  • event - on click event that triggered range change
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { range: [] }
  }
  render() {
    const { range } = this.state

    return <div>
      <p>
        The selected range is: {JSON.stringify(range)}.
      </p>
      <Calendar
        range={this.state.range}
        onRangeChange={(range) => {
          this.setState({ range })
        }}
      />
    </div>
  }
}

export default () => <App />
Fn(dayProps)
default: undefined
Called when day is rendered. dayProps are the props applied on Day component.
If specified, it must return a object with props. Existing props can be changed or new ones added.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'
const assign = Object.assign

const onRenderDay = (buttonProps) => {
  if (buttonProps.day === '10') {
    return assign(buttonProps, {
      style: {
        background: '#e9580a',
        color: '#fff'
      }
    })
  }

  return buttonProps
}

export default () => <div>
  <p>
    Date 10 has an orange background.
  </p>
  <Calendar onRenderDay={onRenderDay}  />
</div>
Fn()
default: undefined
Called when clock input time is changed.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      time: false,
      times: 0
    }
  }

  render() {
    return <div>
      {this.state.time ? <div style={{ color: '#ff6677' }}>Time has been changed - { this.state.times}!</div> : null}
      <Calendar
        showClock
        dateFormat="DD-MM-YYYY hh:mm:ss"
        onTimeChange={() => this.setState({ time: true, times: this.state.times + 1 })}
      />
    </div>
  }
}

export default () => <App />
Fn(dateString, { dateMoment, timestamp, dateString })
default: undefined
Called when viewDate changes.
It is called with the following params:
  • dateString: String - viewDate in dateFormat.
  • dateInfo: Object - more information about the new date.
    • dateMoment: Moment - viewDate as Moment instance.
    • timestamp: String - viewDate in ms.
    • dateString: String - same as first param.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { viewDate: null }
  }
  render() {
    return <div>
      <p>
        View date is: {this.state.viewDate || 'no date'}
      </p>
      <Calendar
        onViewDateChange={(viewDate) => {
          this.setState({ viewDate })
        }}
        viewDate={this.state.viewDate}
      />
    </div>
  }
}

export default () => <App />
Object
default: undefined
Specifies a className for the Calendar component.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  dateFormat="DD-MM-YYYY hh:mm:ss"
  className="calendar"
/>
Object
default: undefined
Specifies a style for the Calendar component.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import '@zippytech/react-toolkit/Calendar/index.css'

export default () => <Calendar
  dateFormat="DD-MM-YYYY hh:mm:ss"
  style={{
    border: '1px solid green',
    borderRadius: 3
  }}
/>
Fn()
undefined
Focuses the Calendar.
import React from 'react'
import Calendar from '@zippytech/react-toolkit/Calendar'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'
import '@zippytech/react-toolkit/Calendar/index.css'

const focusedStyle = {
  fontWidth: 'bold',
  color: 'green'
}

const unfocusedStyle = {
  fontWidth: 'bold',
  color: 'gray'
}

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      focused: false
    }
  }

  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Focus the component:{' '}
        <Button
          onClick={() => {
            this.picker.focus()
          }}
        >
          Focus
        </Button>
      </div>
      <p>The component is {
        this.state.focused ?
        <span style={focusedStyle}>focused</span> :
        <span style={unfocusedStyle}>blurred</span>
      }</p>
    <Calendar
      ref={p => this.picker = p}
      dateFormat="DD-MM-YYYY"
      onFocus={(focused) => this.setState({ focused: true })}
      onBlur={(focused) => this.setState({ focused: false })}
    />
  </div>
  }
}

export default () => <App />