appointment-calendar-carousal v1.3.0

appointment-calendar-carousal

React components for creating carousel based calendar appointments.

Quickstart

Install the library with peer dependencies:

# With yarn
yarn add appointment-calendar-carousal antd dayjs

# or with npm
npm i appointment-calendar-carousal antd dayjs

Note: antd and dayjs are required for this package to work. It is recommended to use antd@^5.0.0 and dayjs@1.11.0

Then, import the AppointmentCalenderProvider and wrap your app with it

import { AppointmentCalenderProvider } from 'appointment-calendar-carousal'

function App() {
    return (
        <AppointmentCalenderProvider>
         {...}
        </AppointmentCalenderProvider>
    )
}

Lastly, import CalendarAppointment and useAppointmentCalender hook

import CalendarAppointment, { useAppointmentCalender } from 'appointment-calendar-carousal'

function SomeComponent() {
    const { selectedDates } = useAppointment()

    return (
        {...}
         <CalendarAppointment />
        {...}
    )
}

Docs

You can use appointment-calendar-carousal as is by just wrapping the app with AppointmentCalenderProvider and placing the CalendarAppointment component where needed. Then You can get values from the provided useAppointment hook.

Or you can use useAppointment hook with your own custom components and even mix some of the provided components like CalenderCard.

Components

AppointmentCalenderProvider

This is a Wrapper for the appointment state management and pre-configurations.

interface IDate = {
  dates: Dayjs;
  closed: boolean;
}

interface Formats = {
  date: string; /** @default "DD, MMMM YYYY" */
  time: string; /** @default "h:mm a" */
}

CalendarAppointment

This is the main component and can be used as is with useAppointment, or can be used as a controlled component.

CalendarCarousel

This is the default calender component used in CalendarAppointment.

CalenderCard

This is the default calender card component used in CalendarCarousel component.

Hooks

useAppointmentCalender()

This contains all the configs and state of the appointment calender.

interface SelectedValues {
  datetime: Dayjs
  duration: number
}

Helper Functions

These helper functions can be used to generate a list of dates.

getDateList()

type ClosedDays = Array<'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday' | 'Sunday'>

getDatesByNumber()

getDates()

:no_entry: DEPRECATED

Design Token

Design token can be provided to AppointmentCalenderProvider for customization.

List of available tokens:

interface BreakPoint {
  xs?: number
  sm?: number
  md?: number
  lg?: number
  xl?: number
  xxl?: number
}

License

MIT Licensed Copyright (c) 2023 Muqarrab Hussain