React Appointment System

About

React component for a functional appointment system.

• Customizable appointment calendar that lists available times
• Separate views for normal user to pick appointments and for administrator to view and manage the appointments
• No user management, appointments are individualized based on unique appointment code
• Users can use the appointment code to search their appointment and delete the appointment
• Support for different appointment durations, available dates and times (see usage & props below)

Install

npm install react-appointment-system

Usage

import React from 'react';
import AppointmentSystem from 'react-appointment-system';

function App() {
  const parameters = {
    durationOptions: [15, 30, 45, 60, 90],
    startTime: 8,
    endTime: 16,
    days: 7,
    futureWeeks: 2,
    exceptions: [
      {
        days: [6,7],
        start: 10,
        end: 16
      },
      {
        date: new Date(2022, 9, 31),
        start: 12,
        end: 20
      },
    ]
  };

  const url = "your-server-url";

  const code = "your-custom-code1234";

  return (
    <div>
        <AppointmentSystem parameters={parameters} url={url} code={code}/>
    </div>
  );
}

export default App;

Props

Name	Type	Required	Description
url	string	false	The url to your backend server, where the appointments will be saved. If not provided, appointments will be saved only locally.
code	string	false	The code that opens the administrator view. Typed in the search bar. If you do not provide one, the default code is 1234567890.
parameters	object	true	Parameters for the appointment calendar. Properties listed below.
parameters.durationOptions	array	true	Appointment durations that are offered. Duration in minutes.
parameters.startTime	number	true	Time(hours, 0-23), when first appointment is offered
parameters.endTime	number	true	Time(hours, 1-24), when appointment offering stops
parameters.days	number	true	How many days a week appointments are offered (1-7). For example, if this is set at 5, appointments are offered mon-fri.
parameters.futureWeeks	number	true	How many weeks into the future appointments are offered
parameters.exceptions	array	false	Exceptions to the above parameters. See below for more info

About Exceptions

• Custom start/end times for certain days every week:
  Example: Every weekend(saturday&sunday) start at 10.00 and end at 16.00
  

{ days: [6,7], start: 10, end: 16 }

• Custom start/end time for a specific date:
  Example: On 31/10/2022 start at 12.00 and end at 20.00
  Note that the month starts from 0

{ date: new Date(2022, 9, 31), start: 12, end: 20 }

About the url and server connection

It was designed for testing purposes to work with a Node.js server that uses MongoDB. The component uses Fetch API and has 3 functions, getAppointments, createAppointment and deleteAppointment. If you provide the url and use it, it probably will not work with your setup. Perhaps this is further developed in the future or perhaps it's not. Obviously you can clone the git repo and modify the functions to work for you. If you want to see the server used for testing, you can find it here: appointment-system-test-server Feel free to use it.

• Appointment definiton:

{
  _id: String,
  time: Date,
  duration: String,
  details: {
    name: String,
    email: String,
    notes: String
  }
}

License

MIT @ Hnes-co