React calendar
Calendar working example
Calendar component
import React, { useRef, useEffect } from "react";
import jSuites from "jsuites";
import "jsuites/dist/jsuites.css";
import "jsuites/dist/jsuites.layout.css";
export default function Calendar({ options }) {
const calendarRef = useRef(null);
const jsuitesCalendarRef = useRef(null);
useEffect(() => {
if (!jsuitesCalendarRef.current) {
jsuitesCalendarRef.current = jSuites.calendar(
calendarRef.current,
options
);
} else {
jsuitesCalendarRef.current.setOptions(options, true);
}
}, [options]);
return <input ref={calendarRef} />;
}
Component usage
import React, { useState } from "react";
import Calendar from "./Calendar";
export default function App() {
const [calendarValue, setCalendarValue] = useState("");
const handleCalendarChange = (element, currentValue) => {
setCalendarValue(currentValue);
};
return (
<Calendar
options={{
value: calendarValue,
onchange: handleCalendarChange,
readonly: false
}}
/>
);
}