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

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.

roggervalf/react-appointment-picker