persian-fullcalendar1 v1.0.0

persian-fullcalendar

persian-fullcalendar is a lightweight React component for creating a Jalali/Georgian datepicker. There is also a range datepicker and timepicker in persian-fullcalendar. The module can also be customized to match the appearance of your designs.

Install

with npm

$ npm i persian-fullcalendar

with yarn

$ yarn add persian-fullcalendar

Props

Date Picker and Calendar

Calendar Provider

Time Picker

Usages

Date picker

import { DatePicker } from "persian-fullcalendar";

function App() {
  return (
    <DatePicker onChange={(e) => console.log(e.value)} />
  )
}

Range date picker

import { DatePicker } from "persian-fullcalendar";

function App() {
  return (
    <DatePicker onChange={(e) => console.log(e.from, e.to)} range />
  )
}

Calendar

import { Calendar, CalendarProvider } from "persian-fullcalendar";

function App() {
  const [calendarValue, setCalendarValue] = useState(new Date())

  return (
    <CalendarProvider>
      <Calendar
        defaultValue={calendarValue}
        onChange={(e) => setCalendarValue(new Date(e.value))}
      />
    </CalendarProvider>
  )
}

Time picker

import { TimePicker } from "persian-fullcalendar";

function App() {
  return (
    <TimePicker
      onChange={(e) => console.log(e.hour, e.minute, e.timeConvention)}
    />
  )
}