time-calendar

React calendar component for displaying schedule.

Setup

npm install time-calendar

Usage

    import { Calendar } from 'time-calendar';

    const testData = {
    "31.05.2025": [
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00"
    ],
    "01.06.2025": [
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00"
    ],
    "30.05.2025": [
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00"
    ]
    }

    <Calendar shedule={testData} onClickTime=(() => alert('Time clicked!')) />

API

Calendar

| Prop | Type | Required | Default | Description | | ----------------- | -------------------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------ | | onClickTime | func | Yes | () => void | The event that will occur when the time cell is clicked | | shedule | object | Yes | {} | Schedule where the key is the date and the values ​​are time cells | | initialDate | Date | No | undefined | Start date, for example to initialize a calendar. времени. | | localeCode | string | No | 'en-US' | The locale code used to format dates. | | className | string | No | '' | The CSS class passed to the component. | | style | React.CSSProperties | No | {} | Inline styles applied to the component. | | delegated | React.HTMLAttributes<HTMLDivElement> | No | undefined | Additional HTML attributes delegated to the component (e.g. id, data-*, events). | | loadingFallback | React.ReactNode | No | null | JSX element that is rendered while loading (lazy loading, etc.). | | errorFallback | (error: Error) => React.ReactNode | No | undefined | A function that returns JSX when an error occurs (e.g. during rendering). |

Example

<Calendar
  shedule={{"31.05.2025": ["10:00"]}} 
  onClickTime=(() => alert('Time clicked!'))
  initialDate={new Date()}
  localeCode="af"
  className="override-class"
  style={{ padding: 10 }}
  delegated={{ id: 'root-div' }}
  loadingFallback={<span>I'm busy...</span>}
  errorFallback={(error) => <div>Oh, no: {error.message}</div>}
/>

Time

| Prop | Type | Required | Default | Description | | ----------- | -------------------------------------- | -------- | ------------ | ------------------------------------------------------------------------------------ | | onClick | func | Yes | () => void | The event that will occur when the time cell is clicked | | cells | string[] | Yes | {} | Time schedule array | | className | string | No | '' | The CSS class passed to the component. | | style | React.CSSProperties | No | {} | Inline styles applied to the component. | | delegated | React.HTMLAttributes<HTMLDivElement> | No | undefined | Additional HTML attributes delegated to the component (e.g. id, data-*, events). |

Example

<Time
  shedule={["10:00"]} 
  onClick=(() => alert('Time clicked!'))
  className="override-class"
  style={{ padding: 10 }}
  delegated={{ id: 'root-div' }}
/>

Development

git clone [email protected]:ilydyu/time-calendar.git
cd time-calendar
npm install
npm run storybook