• JavaScript Calendar

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