Calendar component

A Calendar component

Install

npm i @wethecurious/wtc-ui-library

---

Usage

Import it into your project

import { SingleDatePicker } from '@wethecurious/wtc-ui-library'

Plain button

// Simple
<SingleDatePicker onDateChange={action('date changed')} />

// Within set range
<SingleDatePicker
  autoFocus={true}
  keepOpenOnDateSelect={true}
  isOutsideRange={day =>
    !isInclusivelyAfterDay(day, moment()) ||
    // @ts-ignore
    isInclusivelyAfterDay(day, moment().add(2, 'weeks'))
  }
  onDateChange={action('date changed')}
/>

<SingleDatePicker
  autoFocus={true}
  keepOpenOnDateSelect={true}
  isDayBlocked={day1 =>
    dayStatuss.some(
      day2 =>
        day2.status === 'status.disabled' &&
        isSameDay(day1, moment(day2.date))
    )
  }
  isDayWarning={day1 =>
    dayStatuss.some(
      day2 =>
        day2.status === 'status.warning' &&
        isSameDay(day1, moment(day2.date))
    )
  }
  dayStatuss={dayStatuss}
  onDateChange={action('date changed')}
/>

Props

Prop	Description	Default
autoFocus	Calendar Open on load	false
keepOpenOnDateSelect	Keep calendar open on date select	false
isDayBlocked	Specific day blocked
isDayWarning	Specific day warning
dayStatuss	Events
onDateChange	Date change handler
screenReaderInputMessage	Screen reader message