Schedule-react-component NPM

Schedule-react-compoent

<Schedule onAdd={onAdd} onCancel={onCancel} />

Demo

Installing

$ npm i schedule-react-component

Exports

import { Schedule, Ireservation } from 'schedule-react-component';

Props

Common props you may want to specify include:

workingHours - the working hours example : { hour: '9-10', isReserved: false, val: 9 }, { hour: '10-11', isReserved: false, val: 10 }, { hour: '11-12', isReserved: false, val: 11 }, { hour: '13-14', isReserved: false, val: 13 }, { hour: '14-15', isReserved: false, val: 14 }, { hour: '15-16', isReserved: false, val: 15 }, { hour: '16-17', isReserved: false, val: 16 }
daysOff - the days you don't want to reserve example : 'Sun','Sat'
reservations - reservations data
OnAdd - on add reservation
calendarClass - calendar css class
dayClass - day css class
hourClass - hour css class
dialogClass - dialog css class
dialogTitle - dialog title
input - choose the dialog input , select or other component ...
cancelDialogTitle - cancel dialog title
onCancel - on cancecl reservation function
cancelDialogClass - cancel dialog css class

Schedule Usage

import { Ireservation, Schedule } from 'schedule-react-component'

//your data
const reservs: Array<Ireservation> = [
  { date: "2023-01-06T00:00:00.000Z", day: 6, hour: 14, id: 1, month: 1, year: 2023 },
  { date: "2023-01-06T00:00:00.000Z", day: 6, hour: 15, id: 1, month: 1, year: 2023 },
  { date: "2023-01-07T00:00:00.000Z", day: 7, hour: 16, id: 1, month: 1, year: 2023 },
  { date: "2023-02-06T00:00:00.000Z", day: 6, hour: 15, id: 1, month: 2, year: 2023 },
  { date: "2023-03-06T00:00:00.000Z", day: 6, hour: 15, id: 1, month: 3, year: 2023 },
  { date: "2023-04-06T00:00:00.000Z", day: 6, hour: 15, id: 1, month: 4, year: 2023 },
  { date: "2023-05-06T00:00:00.000Z", day: 31, hour: 15, id: 1, month: 1, year: 2023 },
]

const Component = () => {
  const onAdd = (hour: number, day: number, month: number, year: number) => {
    Post('api/addReservation',{hour,day,month,year})
  }
  const onCancel = (hour: number, day: number, month: number, year: number) => {
    Delete('api/deleteReservation',{hour,day,month,year})
  }
  return (
    <div>
      <Schedule OnAdd={onAdd} onCancel={onCancel} reservations={reservs} />
    </div>
  )
}

export default Component