This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

persian-fullcalendar1

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

props	type	default
defaultValue	timestamp | Date | Dayjs	undefined
weekend	number[]	undefined
round	string one of thin | x1 | x2 | x3 | x4	thin
accentColor	string	#0D59F2
locale	string one of fa | en	fa
direction	string one of rtl | ltr	rtl
onChange	function	undefined
range	boolean	false
from	timestamp | Date | Dayjs	undefined
to	timestamp | Date | Dayjs	undefined
show	boolean	false
inputClass	string	null
inputAttributes	object of InputHTMLAttributes	null
className	string	null
customShowDateFormat	string ex: YYYY MMMM DD or DD/MM etc.	undefined
position	right | left | center	right
width	number
height	number
itemWidth	number
itemHeight	number
events	array of json
weekDays	string shortWeekDays longWeekDays

Calendar Provider

props	type	default
round	string one of thin | x1 | x2 | x3 | x4	thin
accentColor	string	#0D59F2
locale	string one of fa | en	fa
direction	string one of rtl | ltr	rtl
children	ReactNode	null

Time Picker

props	type	default
defaultValue	timestamp | Date | Dayjs	Date
round	string one of thin | x1 | x2 | x3 | x4	thin
accentColor	string	#0D59F2
locale	string one of fa | en	fa
clockTime	number one of 12 | 24	24
inputClass	string	null
inputAttributes	object of InputHTMLAttributes	null

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