time-calendar

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 [e-mail]:ilydyu/time-calendar.git
cd time-calendar
npm install
npm run storybook