date-range-calendar

date-range-calendar

A calendar and date/date-range picker for react.

• Dependencies
• Setup
• Options

Dependencies

• dayjs
• styled-components

Setup

npm i date-range-calendar

GitHub

https://github.com/Brian-1150/date-range-calendar

Code Examples

Default calendar with no props:

import { Calendar } from 'date-range-calendar';

function App() {
  return (
    <Calendar />
  );
}
export default App;

Pass props to customize colors:

import { Calendar } from 'date-range-calendar';

function App() {
  return (
    <Calendar
      bgColor='#e0ffff'
      startBgColor='#228b22'
      endBgColor='#ab4e52'
      rangeColor='#faf0be'
    />
  );
}
export default App;

Pass set functions to receive start and end date values:

import React, { useState } from 'react';
import { Calendar } from 'date-range-calendar';

function App() {
  const [startDate, startDateSet] = useState('');
  const [endDate, endDateSet] = useState('');

  return (
    <div style={{padding: '2%'}}>

      <div style={{border: '1px solid black', padding: '5%', margin: '2%'}}>
        <div>Start Date: {startDate}</div>
        <div>End Date: {endDate}</div>
      </div>
    <div>
            <Calendar

        startSet={startDateSet}
        endSet={endDateSet}
        />
    </div>
        </div>
  );
}
export default App;

Options

begin: string in format mmyyyy(082020 for august 2020)
  default is current month of current year

calendarLength: number in months
  default is 24 months

rangeLimit: number in days
  default is 30 days

bgColor: string
   default is gray

startBgColor: string
  default is steelblue

endBgColor: string
  default is steelblue

rangeColor: string
  default is dodgerblue

startSet, endSet: (end: string) => void
  you need to pass a set function as a prop in order to get the start/end values. Format will be 'dd Month Year' (01 April 2022) See the example above

blackoutColor: string
  default is red

textColor: string
   affects dayNames, non selected non blackout numbers NOT MONTHS. Default is black.

monthColor: string   change the color of the names of the months. Default is #0067B4

highlightedTextColor: string //complete

blackoutPast: boolean // option to turn it off only works if custom begin not selected