A calendar to select available time slots

React Available Times

A React component that allows a user to select time-slots in a calendar-like UI.

Installation

npm install --save react-available-times

Usage

import AvailableTimes from 'react-available-times';

<AvailableTimes
  weekStartsOn="monday"
  calendars={[
    {
      id: 'work',
      title: 'Work',
      foregroundColor: '#ff00ff',
      backgroundColor: '#f0f0f0',
      selected: true,
    },
    {
      id: 'private',
      title: 'My private cal',
      foregroundColor: '#666',
      backgroundColor: '#f3f3f3',
    },
  ]}
  onChange={(selections) => {
    selections.forEach(({ start, end }) => {
      console.log('Start:', start, 'End:', end);
    })
  }}
  onEventsRequested={({ calendarId, start, end, callback }) => {
    loadMoreEvents(calendarId, start, end).then(callback);
  }}
  initialSelections={[
    { start: aDateObject, end: anotherDateObject }
  ]}
  height={400}
  recurring={false}
  availableDays={['monday', 'tuesday', 'wednesday', 'thursday', 'friday']}
  availableHourRange={{ start: 9, end: 19 }}
/>

Props

None of the props are required.

• weekStartsOn: a string (either "monday" or "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 start and an end date.
• onEventsRequested: a function called when new weeks are loaded. Hook in to
  this function to continuously feed events to the calendar view. The callback
  provided 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 start and an end date, plus a title property. Can have a
  calendarId property tying them to a calendar, inheriting the foreground and
  background color. Can also have a allDay property, in which case they are
  rendered at the top.
• initialSelections: an array of pre-filled selections. Each object in the
  array needs a start and an end date.
• height: a string or a number controlling the height of the component.
  E.g. '100%', 350, '100vh'. If left out, the full height of the screen
  will be used.
• recurring: set to true to turn the view into a selector for recurring
  availability. No dates are then shown, and the onChange callback is called
  with events that have a start and end expressed in number of minutes since
  the start of the week. The weekStartsOn prop is taken into account here, so
  the 0 minute is either monday at 00:00 or sunday at 00:00.
• availableDays: an array of strings ("monday", "tuesday" ...) specifying
  what days of the week are available to be used. It is set to every day by default.
• availableHourRange: an object with start and end numbers, ranging from 0 to 24
  inclusive. Defaults to the entire day by default.

GitHub