time-calendar/README.md

Shows the schedule, increases and decreases the calendar day, changing the schedule

# time-calendar

React calendar component for displaying schedule.

## Setup

##
    npm install time-calendar

## Usage 

```tsx
    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

```tsx
<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

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

## Development
##
    git clone git@github.com:ilydyu/time-calendar.git
    cd time-calendar
    npm install
    npm run storybook