calendra

Props

Name	Type	Default	Description
dateValue	Date	Required	The selected date value.
setDateValue	(value: React.SetStateAction) => void	Required	A function to set the new date value.
darkMode	boolean	false	Optional. Set to true to enable dark mode.
readOnly	boolean	false	Optional. Set to true to disable user interactions with the calendar.
yearRange	[number, number]	last 50 year	Optional. The allowed range of years for the calendar.

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import { Calendar } from 'calendra';

function App() {
  const [dateValue, setDateValue] = useState(new Date());

  return (
    <>
      <Calendar dateValue={dateValue} setDateValue={setDateValue} />
    </>
  );
}

Here's an example of dark mode usage:

import React, { useState } from 'react';
import { Calendar } from 'calendra';

function App() {
  const [dateValue, setDateValue] = useState(new Date());
  const [darkMode, setDarkMode] = useState(false);

  return (
    <>
      <Calendar 
          dateValue={dateValue} 
          setDateValue={setDateValue} 
          darkMode={darkMode}
        />
    </>
  );
}