 |
 |
| 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. |
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}
/>
</>
);
}