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