availability-scheduler

availability-scheduler

A React component for editing availability time schedules

I18N tokens:

'availability_duringopenhours', 'During Open Hours'
'availability_apply', 'Apply'
'availability_cancel', 'Cancel'
'availability_available', 'Available'
'availability_unavailable', 'Unavailable'
'availability_empty_error'
'availability_newevent'
'availability_eventname', 'Event Name:'
'availability_customerscansee', '* Customers can see this info'
'openrest_menubuilderdishmodal_wix_availability', 'Availability:'
'availability_starttime', 'Start Time:'
'availability_endtime', 'End Time:'
'availability_available_warning', 'Note that between ${params.start} and ${params.end} you are open continuously, regardless of your regular hours.'
'availability_newevent', 'New Event'
'availability_regularhours', 'Regular Hours'
'availability_event_desc', 'Need to change your hours for a short time?'
'availability_upcomingevents', 'Upcoming Events'
'availability_now', 'now'
'availability_moreexceptionscount', '+ ${params.count} more'
'availability_edit', 'Edit'
'availability_endson', 'ends on ${params.day}'
'availability_to', 'to'
'availability_allday', 'all day'
'openrest_chargepane_duplicate'
'openrest_chargepane_delete'
'availability_duringopenhours', 'During Open Hours'
'availability_customhours', 'Custom Hours'
'availability_clear', 'Clear'
'availability_pasteopenhours', 'Paste open hours'
'availability_open24h', 'Open 24/7'

Usage

$ npm i -S availability-scheduler

Props

{
    i18n: PropTypes.shape({
        getLocale: PropTypes.func.isRequired,
        getDir: PropTypes.func.isRequired,
        get: PropTypes.func.isRequired
    }),
    scheduleAlways: PropTypes.string,
    availability: PropTypes.shape({
        periods: PropTypes.arrayOf(PropTypes.shape({
            openDay: PropTypes.string,
            openTime: PropTypes.string,
            closeDay: PropTypes.string,
            closeTime: PropTypes.string
        })),
        specialHourPeriods: PropTypes.arrayOf(PropTypes.shape({
            startDate: PropTypes.string,
            endDate: PropTypes.string,
            isClosed: PropTypes.bool,
            comment: PropTypes.string
        }))
    }),
    onAccept: PropTypes.func.isRequired,
    modalTitle: PropTypes.string,
    source: PropTypes.string,
    customOnly: PropTypes.bool,
    availableText: React.PropTypes.string,
    unavailableText: React.PropTypes.string,
    openTimes: React.PropTypes.object,
    timezone: React.PropTypes.string.isRequired
}

Instantiation

import {AvailabilityEditor} from 'availability-scheduler';

<AvailabilityEditor
  timezone='Europe/London'
  availability={availability}
  onAccept={availability => console.log('accepted', availability)}
  i18n={{
  	getLocale: () => 'en_US',
    getDir: () => 'ltr',
    get: (token, fallback, params) => fallback
  }}
/>