react-dates-lite

Install

yarn add styled-components - peerDependency, also check that you have react and react-dom yarn add react-dates-lite

API

Example

import Calendar from 'react-dates-lite';

<Calendar
  visibleMonths={1}
  firstMonth={new Date(2018, 1, 1)}
  lastMonth={new Date(2018, 2, 1)}
  selectedDates={[new Date()]}
  selectDates={console.log}
/>;

see this Example or Live demo

Props

• visibleMonths?: number - how many months will be visible (default 1)
• firstMonth: Date - first month in calendar, months between first and last (included) will be in calendar
• lastMonth: Date - last month in calendar, months between first and last (included) will be in calendar
• selectDates: Date[] => any - will receive array of Dates that were selected
• selectedDates: Date[] - array of Dates that are selected
• disabledDates: Date[] - array of Dates that cannot be selected
• allowedDates?: Date[] - array of dates that are selectable (default []) when it's empty, all dates are selectable (except disabled dates)
• future?: boolean - if future dates from today will be enabled (default true)
• past?: boolean - if past dates from today will be enabled (default true)
• rangeSelect?: boolean - if enabled, ranges can be selected, otherwise just one date (default true)
• className?: string - will provide class to the Calendar container (default '')
• colors?: { [string]: number } - will provide colors to these stuff:
  • selected - background-color of selected date
  • selectedHover - background-color of selected date that is hovered
  • hover - background-color of date that is hovered
  • border - border color
  • background - default background-color
  • hover - background-color of hovered date
  • disabled - color of disabled date
  • default values:

  colors = {
    selected: 'rgb(244, 114, 49)',
    selectedHover: 'rgb(255, 141, 74)',
    border: '#e4e7e7',
    background: 'white',
    hover: '#e4e7e7',
    disabled: 'gray',
  };

• classes?: { [string]: string } - will provide colors to these stuff: * button - class for buttons
  • calendarWrapper - class for calendar wrapper
  • month - class for single month wrapper
  • default value: {}
• customClasses?: { [className: string]: Date[] } - add className to specified dates

License

MIT