Skip to content

roggervalf/react-appointment-picker

Repository files navigation

react-appointment-picker

Component to pick appointments

NPM code style: prettier Build Status NPM downloads semantic-release

Demo

Edit AppointmentPicker

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