leilamsc90-reserve-calendar1
v1.0.0
Published
React component that helps you to makes simple Farsi/Jalali/Shamsi date picker. It also has range date picker you can select multiple days in multiple months.
Downloads
4
Maintainers
Readme
Reservation Calendar
Reservation Calendar is a lightweight React component for creating a Jalali/Georgian reserveatio calendar. The module can also be customized to match the appearance of your designs. It should be noted that this module is derived from the zaman module
Design
I appreciate [Leila Yadegari]'s design of this library.
Install
with npm
$ npm i leilamsc90-reserve-calendar
with yarn
$ yarn add leilamsc90-reserve-calendar
Props
Reserve 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 | | holiDays | array of date | null | | reserveDays | array of date | null | | price | array of string | null | | peakDays | array of number | null |
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 |
Usages
Reserve Calendar
import { Calendar, CalendarProvider } from "reservationCalendar";
function App() {
return (
<CalendarProvider locale="fa" round="x2" accentColor="#42aebb">
<Calendar
onChange={(d, to) => console.log(d, to)}
weekends={[6]}range
/>
</CalendarProvider>
)
}