# EventBlock

> `EventBlock` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`.

Source: https://ui.jcsoftdev.com/docs/components/event-block

`EventBlock` is part of the Calendar set, imported from `@jcsoftdev/ui/calendar`.

## Import

```ts
import { EventBlock } from "@jcsoftdev/ui/calendar";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/calendar/event-block`.

## Usage

```tsx
<EventBlock event={cita} variant="detailed" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `event` * | `CalendarEvent` |  |  |
| `variant` | `"compact" \| "detailed"` | `"detailed"` | "detailed": time range, title and subtitle. "compact": one "time title" line. |
| `onOpen` | `((id: string) => void)` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/calendar-eventblock--default)
- [Compact](/storybook/?path=/story/calendar-eventblock--compact)
- [With Trailing Avatar](/storybook/?path=/story/calendar-eventblock--with-trailing-avatar)
- [No End Time](/storybook/?path=/story/calendar-eventblock--no-end-time)
- [Tones](/storybook/?path=/story/calendar-eventblock--tones)
- [Compact Tones](/storybook/?path=/story/calendar-eventblock--compact-tones)
- [Narrow](/storybook/?path=/story/calendar-eventblock--narrow)

## Source

`packages/ui/src/calendar/event-block/event-block.tsx`