React Available Times
A React component that allows a user to select time-slots in a calendar-like UI.
npm install --save react-available-times
import AvailableTimes from 'react-available-times';<AvailableTimes="monday"========/>
None of the props are required.
weekStartsOn: a string (either
"sunday") specifying what day of the week should come first.
calendars: a list of calendars displayed in the dropdown at the top right.
onChange: a function called whenever a selection is made. Receives an array of objects, each with a
onEventsRequested: a function called when new weeks are loaded. Hook in to this function to continuously feed events to the calendar view. The
callbackprovided should be called when you have fetched events for the particular
calendarId. Call the callback with an array of objects, where each object has a
enddate, plus a
titleproperty. Can have a
calendarIdproperty tying them to a calendar, inheriting the foreground and background color. Can also have a
allDayproperty, in which case they are rendered at the top.
initialSelections: an array of pre-filled selections. Each object in the array needs a
height: a string or a number controlling the
heightof the component. E.g.
'100vh'. If left out, the full height of the screen will be used.
recurring: set to
trueto turn the view into a selector for recurring availability. No dates are then shown, and the
onChangecallback is called with events that have a start and end expressed in number of minutes since the start of the week. The
weekStartsOnprop is taken into account here, so the
0minute is either monday at 00:00 or sunday at 00:00.
availableDays: an array of strings (
"tuesday"...) specifying what days of the week are available to be used. It is set to every day by default.
availableHourRange: an object with
endnumbers, ranging from 0 to 24 inclusive. Defaults to the entire day by default.
npm install to install all dependencies. Then, to manually test
the component, run
npm run start-test and open
http://localhost:3333/ in a
Unit tests are run with jest. Run
npm run test -- --watch to run tests.