roggervalf / react-appointment-picker

React component to pick an appointment

react-appointment-picker

Component to pick appointments

Demo

About

This react component is useful for schedules. Based in react-seat-picker.

Install

npm install --save react-appointment-picker

Or

yarn add react-appointment-picker

Usage

import React, { Component } from 'react';

import { AppointmentPicker } from 'react-appointment-picker';

export default class App extends Component {
  state = {
    loading: false,
    continuousLoading: false
  };

  addAppointmentCallback = ({
    addedAppointment: { day, number, time, id },
    addCb
  }) => {
    this.setState(
      {
        loading: true
      },
      async () => {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log(
          `Added appointment ${number}, day ${day}, time ${time}, id ${id}`
        );
        addCb(day, number, time, id);
        this.setState({ loading: false });
      }
    );
  };

  removeAppointmentCallback = ({ day, number, time, id }, removeCb) => {
    this.setState(
      {
        loading: true
      },
      async () => {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log(
          `Removed appointment ${number}, day ${day}, time ${time}, id ${id}`
        );
        removeCb(day, number);
        this.setState({ loading: false });
      }
    );
  };

  addAppointmentCallbackContinuousCase = ({
    addedAppointment: { day, number, time, id },
    addCb,
    removedAppointment: params,
    removeCb
  }) => {
    this.setState(
      {
        continuousLoading: true
      },
      async () => {
        if (removeCb) {
          await new Promise((resolve) => setTimeout(resolve, 1000));
          console.log(
            `Removed appointment ${params.number}, day ${params.day}, time ${params.time}, id ${params.id}`
          );
          removeCb(params.day, params.number);
        }
        await new Promise((resolve) => setTimeout(resolve, 1000));
        console.log(
          `Added appointment ${number}, day ${day}, time ${time}, id ${id}`
        );
        addCb(day, number, time, id);
        this.setState({ continuousLoading: false });
      }
    );
  };

  removeAppointmentCallbackContinuousCase = (
    { day, number, time, id },
    removeCb
  ) => {
    this.setState(
      {
        continuousLoading: true
      },
      async () => {
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log(
          `Removed appointment ${number}, day ${day}, time ${time}, id ${id}`
        );
        removeCb(day, number);
        this.setState({ continuousLoading: false });
      }
    );
  };

  render() {
    const days = [
      [
        { id: 1, number: 1, isSelected: true, periods: 2 },
        { id: 2, number: 2 },
        null,
        { id: 3, number: '3', isReserved: true },
        { id: 4, number: '4' },
        null,
        { id: 5, number: 5 },
        { id: 6, number: 6 }
      ],
      [
        { id: 7, number: 1, isReserved: true, periods: 3 },
        { id: 8, number: 2, isReserved: true },
        null,
        { id: 9, number: '3', isReserved: true },
        { id: 10, number: '4' },
        null,
        { id: 11, number: 5 },
        { id: 12, number: 6 }
      ],
      [
        { id: 13, number: 1 },
        { id: 14, number: 2 },
        null,
        { id: 15, number: 3, isReserved: true },
        { id: 16, number: '4' },
        null,
        { id: 17, number: 5 },
        { id: 18, number: 6 }
      ],
      [
        { id: 19, number: 1 },
        { id: 20, number: 2 },
        null,
        { id: 21, number: 3 },
        { id: 22, number: '4' },
        null,
        { id: 23, number: 5 },
        { id: 24, number: 6 }
      ],
      [
        { id: 25, number: 1, isReserved: true },
        { id: 26, number: 2 },
        null,
        { id: 27, number: '3', isReserved: true },
        { id: 28, number: '4' },
        null,
        { id: 29, number: 5 },
        { id: 30, number: 6, isReserved: true }
      ]
    ];
    const { loading, continuousLoading } = this.state;
    return (
      <div>
        <h1>Appointment Picker</h1>
        <AppointmentPicker
          addAppointmentCallback={this.addAppointmentCallback}
          removeAppointmentCallback={this.removeAppointmentCallback}
          initialDay={new Date('2018-05-05')}
          days={days}
          maxReservableAppointments={3}
          alpha
          visible
          selectedByDefault
          loading={loading}
        />
        <h1>Appointment Picker Continuous Case</h1>
        <AppointmentPicker
          addAppointmentCallback={this.addAppointmentCallbackContinuousCase}
          removeAppointmentCallback={
            this.removeAppointmentCallbackContinuousCase
          }
          initialDay={new Date('2018-05-05')}
          days={days}
          maxReservableAppointments={2}
          alpha
          visible
          selectedByDefault
          loading={continuousLoading}
          continuous
        />
      </div>
    );
  }
}

Props

Name	Type	Default	Required	Description
alpha	boolean	false	false	Displays the name of the day of the week (true), otherwise in dd-mm-yyyy format.
visible	boolean	false	false	Shows the day (true), otherwise they are hidden (false).
loading	boolean	false	false	Shows a white mask on the appointmentPicker.
continuous	boolean	false	false	Allows to continue select appointments while remove previous ones if you already have max reservable appointments.
selectedByDefault	boolean	false	false	Allow to have already selected appointments (true), otherwise (false) they aren't going to be checked by their isSelected property.
maxReservableAppointments	number	0	false	Limits the number of selectable appointments.
initialDay	Date	-	true	Sets the initial day for your days.
unitTime	number	15 _ 60 _ 1000	false	Sets the minimal period of time between appointments.
local	string	en-US	false	Sets the locale param for Dates variables. See documentation.
addAppointmentCallback	function	({addedAppointment: {day, number, time, id}, addCb}) => { console.log(Added appointment ${number}, day ${day}, time ${time}, id ${id}); addCb(day, number, time, id);},	false	Should be customized as you need. Remember to use addCb(day,number,time,id) for accepting the selection, otherwise omit it. For continuous case see the example where should use removeCb(day,number) for previously selected appointment.
removeAppointmentCallback	function	({day, number, time, id}, removeCb) => {console.log( Removed appointment ${number}, day ${day}, time ${time}, id ${id}); removeCb(day,number);}	false	Should be customized as you need. Remember to use removeCb(day,number) for accepting the deselection, otherwise omit it.
days	array	-	true	Array of arrays of json. (See next section).

Appointment properties

Each json in days prop could be null (empty appointment) or has these properties.

Name	Type	Default	Required	Description
id	number or string	undefined	false	It identify an appointment.
number	number or string	undefined	false	It will be its order.
isSelected	boolean	false	false	It will be checked in case selectedByDefault is true.
isReserved	boolean	false	false	Disable the option of click it.
periods	number	1	false	Represents how many periods belongs to an appointment.

Contributing

Fork the repo, make some changes, submit a pull-request! Here is the contributing doc that has some details.

License

MIT © roggervalf