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

react-appointment-picker's Issues

How can i start the schedule earlier than 9AM?

Hi Roger,
Thanks for the component. It really fits the bill for my app.
Below is not an issue but more of requests.

1. Is it possible to pass the start time of the schedule via parameter? not always starting at 9
2. Is it possible to have prev and next button, with which user can view data for next week or prev week?

Thanks much
Vikram

İf i change ip picker initial 12 Am

Hi. i add date picker in my code but i change days appoinment picker begins 12.00 Am. How can i fix it?

https://codesandbox.io/s/magical-cray-kfrz8l?file=/src/App.js

how can i change 24 hours style

Is rendering of custom element possible?

Is it possible to use custom component in the rendering of the appointment - like with custom hovers,styles, etc?

Thanks

Unused `unitTime` prop

Hi! The unitTime prop is declared, documented, but never actually referenced in the project: am I missing something?
Here are the search results in this repository for said identifier:
https://github.com/roggervalf/react-appointment-picker/search?q=unitTime

Change time and date format

Hi. i have problem to change locale setting. ```
` useEffect(() => {
if (date != null) {
const initialDate = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
15,
0,
0
);

  console.log("getting appointments");
  getAppointmentDays(date).then((days) => {
    setAppointment(
      <AppointmentPicker
        addAppointmentCallback={addAppointmentCallbackContinuousCase}
        removeAppointmentCallback={removeAppointmentCallbackContinuousCase}
        initialDay={initialDate}
        days={days}
        maxReservableAppointments={1}
        visible
        selectedByDefault
        unitTime={3600000}
        loading={loading}
        continuous
        locale={tr}
        
           />
    );
  });
}

}, [date, loading]);`

` return (
    <Container fluid>
      <Row>
        <Col xs={7} md={6}>
          <DayPicker
            locale={tr}
            weekStartsOn={1}
            mode="single"
            selected={date}
            onDayClick={(date) =>
              setDate(new Date(date.getTime() + 180 * 60 * 1000))
            } // utc saat ayarı çok uğraştık sonunda bulduk
            // modifiers={modifiers}
          />
        </Col>
        <Col xs={5} md={6}>
          {appointment}
        </Col>
        <button id="save-button">Publish</button>
      </Row>
    </Container>
  );`
data picker changed to local but appointmen picker doesn't change.
i want to change 24 h and yyyy-mm-dd date format. How can i do it? 

Update peer dependencies to support react 18

It looks like the peer dependencies are currently set to React 16 - could we change this to support React 17 and 18 as well?

Does not contain a default export (imported as 'AppointmentPicker').

After using the example code, I receive this error message:

Attempted import error: 'react-appointment-picker' does not contain a default export (imported as 'AppointmentPicker').
"react": "^17.0.1",
"react-appointment-picker": "^3.0.0",

selectedByDefault not working with functional components

Hi,

I'm facing issue with selectedByDefault when using functional components.
I'm fetching the data using useContext hook, and setting days prop with useEffect, The isSelected dosen't affected in picker.

The isReserved works fine.

How do we set the initial delay in time slots for each day?

Displaying time in GMT instead of local timezone on IOS device

Hi There,
This component works perfectly on the Chrome, Firefox mobile emulators perfectly.
But when i check it on the real mobile device it is showing as Invalid date.
My gut feeling is it is due to you are using normal date object whereas IOS specifically needs ISO date format. Can you please look into this?

One exclusive appointment

Could be an option, like if we set the maxReservableAppointments to 0, that only one appoitment is acceptable, when we click on another apointment, it automaticallys remove the first one.
I was trying to made that change, but I'm still too newbie in JS.

Thanks!