React Availability Calendar
A customizable React component for displaying booking availabilities on a calendar.
No moment
dependency required, but accepts a moment
-like prop that needs to implement a subset of Moment
's API.
DatePoll app built on top of this component
Example installation
yarn add react-availability-calendar moment bootstrap
(or npm install
)
typescript definitions included
Props:
Provide bookings, from which avails will be derived, or avails
directly
Customize "Request Appointment" label:
pass theme={{requestAppointmentLabel: "Request Booking or other wording"}}
Installation:
npm install react-availability-calendar --save
Demos:
non-typescript example:
Usage:
; ;; ;; const msInHour = 60 * 60 * 1000; const App: React.FC = { const now = ; const onAvailabilitySelected = console; const onChangedCalRange = console; const blockOutPeriods: MsSinceMidnightRange = 0 * msInHour 9 * msInHour 19 * msInHour 24 * msInHour ; const bookings: Booking = startDate: 2020 2 1 19 endDate: 2020 2 1 20 startDate: 2020 2 1 16 30 endDate: 2020 2 1 17 ; const providerTimeZone = 'America/New_York'; return <div style= width: 350 > <AvailabilityCalendar bookings=bookings providerTimeZone=providerTimeZone moment=moment initialDate=now onAvailabilitySelected=onAvailabilitySelected onCalRangeChange=onChangedCalRange blockOutPeriods=blockOutPeriods /> </div> ;}; ;
Customizability via overrides
const overrides = ...defaultComponents // ToolBar: { Root: (p: any) => <div>{JSON.stringify(p)}</div> }, ToolBar: className: "border btn-group" style: minHeight: undefined ToolBarButton: className: "btn btn-outline-info" style: outline: "none" Weekday: style: borderWidth: 0 borderStyle: "solid" borderBottomWidth: 1 borderRightWidth: 1 borderColor: "#dddddd" className: "none" AvailSlot: ? "btn btn-success" : "btn btn-outline-primary" DayCell: pisSelected ? transition: "width 200ms, height 200ms" height: 60 width: 60 : transition: "width 200ms, height 200ms" ? "rounded-circle border-success" : pisSelected || phasAvail ? "rounded-circle border-primary" : "rounded-circle border-default" ; // ... <AvailabilityCalendar overrides=overrides ...restOfProps />// ... ``` ### Examples - [Example](https://github.com/nyura123/react-availability-calendar/tree/master/examples/example1) ### Running an example `cd example/example1` `npm install` `npm start` ## Bootstrapped with [TSDX](https://github.com/palmerhq/tsdx)