Components

Calendar

Time-based calendar grid for weekly/daily schedule display

Overview

Calendar is a time-based calendar view compound component. It renders a time grid similar to Google Calendar's weekly/daily view.

Compound — Composed of three components: TimeGrid, TimeCell, DayColumnHeaders
Auto-scroll — Automatically scrolls to the current time
Current time indicator — Displays a red line at the current time
Utilities — Provides time calculation utility functions and constants

Basic Usage

import { Calendar } from '@illog/ui'
 
<Calendar.TimeGrid
  columns={7}
  header={
    <Calendar.DayColumnHeaders
      days={[
        { label: 'Mon', dateNum: '17', isToday: false },
        { label: 'Tue', dateNum: '18', isToday: true },
        // ...
      ]}
    />
  }
>
  <Calendar.TimeCell
    id="event-1"
    title="Meeting"
    subtitle="Team standup"
    caption="10:00 - 11:00"
    color={{
      bg: 'backgroundBrandSecondary',
      border: 'var(--background-brand-default)',
      text: 'textBrandDefault',
    }}
    top={600}
    height={60}
    left="64px"
    width="calc(100% / 7)"
    onClick={() => openEvent('event-1')}
  />
</Calendar.TimeGrid>

Sub-components

Calendar.TimeGrid

Prop	Type	Default	Description
`columns`	`number`	`1`	Number of day columns
`hourHeight`	`number`	`60`	Height per hour (px)
`gutterWidth`	`number`	`64`	Time label area width (px)
`scrollHeight`	`string`	`'calc(100vh - 160px)'`	Scroll container height
`showCurrentTime`	`boolean`	`true`	Current time indicator line
`currentTimeColumn`	`number`	`-1`	Column for current time line (-1 = all)
`header`	`ReactNode`	—	Header area (DayColumnHeaders)

Calendar.TimeCell

Prop	Type	Default	Description
`id`	`string`	required	Event ID
`title`	`string`	required	Event title
`subtitle`	`string`	—	Subtitle (shown when height > 34px)
`caption`	`string`	—	Caption (shown when height > 54px)
`color`	`TimeCellColor`	required	Color settings (`bg`, `border`, `text`)
`top`	`number`	required	Top offset (px)
`height`	`number`	required	Height (px)
`left`	`string`	required	Left offset (CSS)
`width`	`string`	required	Width (CSS)
`onClick`	`() => void`	—	Click handler

Calendar.DayColumnHeaders

Prop	Type	Default	Description
`days`	`DayColumnHeader[]`	required	Day data array
`gutterWidth`	`number`	`64`	Time label area width
`height`	`number`	`40`	Header height

DayColumnHeader

Prop	Type	Description
`label`	`string`	Day display (e.g., 'Mon')
`dateNum`	`string`	Date display (e.g., '21')
`isToday`	`boolean`	Today highlight

Utility Functions

import {
  useCurrentTime,
  formatHour,
  formatTimeLabel,
  getMinutesFromMidnight,
  DEFAULT_HOUR_HEIGHT,   // 60
  DEFAULT_GUTTER_WIDTH,  // 64
  HOURS,                 // [0, 1, 2, ..., 23]
} from '@illog/ui'
 
// Current time hook (refreshes every 30 seconds)
const now = useCurrentTime()
 
// Minutes → px conversion example
const topPx = getMinutesFromMidnight(eventStart) * (hourHeight / 60)
const heightPx = (durationMinutes) * (hourHeight / 60)

Guidelines

Calculate TimeCell's top and height using getMinutesFromMidnight and hourHeight
For overlapping events, adjust left and width to place them side by side
Use showCurrentTime={false} to create a static calendar