React Calendar
Introduction
Installation
Dual Calendar
Props
With Shortcuts

Basic

By default the calendar starts from Sun which is represented 0 index. You can provide the index for any other day that you want as start of the week.

  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • Su
  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • Su
PropType
shortcutButtons (required)Array<{ id: string, render: () => React.ReactNode }>
import React, { useCallback, useState } from 'react';


import { Calendar } from '@natscale/react-calendar';


import '@natscale/react-calendar/dist/main.css';


export default function App() {
  const [value, setValue] = useState([]);


  const onChange = useCallback(
    (val) => {
      setValue(val);
    },
    [setValue],
  );


  return <Calendar showDualCalendar isRangeSelector value={value} onChange={onChange} />;
}