Primitives
41
TimeGrid
Weekly calendar grid with a live “now” line.
rendered by aura-react
rendered by aura-react
rendered by aura-vue
rendered by aura-svelte
built from aura-angular's own class helpers
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Mon
Tue
Wed
Thu
Fri
Sat
Sun
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
Standup
Design review
Focus block
Retro
Code
A recipe is a composition of primitives, not one element — so there is no single snippet to copy. Build it from the classes below, or open the primitives it is made of.
Demo.tsx
import { TimeGrid, type TimeGridEvent } from '@ilomee/aura-react';
const EVENTS: TimeGridEvent[] = [
{ id: '1', day: 0, start: 9, duration: 1.5, label: 'Standup' },
{ id: '2', day: 1, start: 13, duration: 2, label: 'Design review' },
{ id: '3', day: 3, start: 10, duration: 3, label: 'Focus block' },
{ id: '4', day: 4, start: 16, duration: 1, label: 'Retro' },
];
export default function Demo() {
return <TimeGrid events={EVENTS} dayStart={8} dayEnd={18} showNow />;
}Demo.vue
<TimeGrid :events="events" :day-start="8" :day-end="18" show-now />The “now” line is drawn on the client only — the server has no clock the browser agrees with.
Demo.svelte
<TimeGrid {events} dayStart={8} dayEnd={18} showNow />The “now” line is drawn on the client only — the server has no clock the browser agrees with.
Used as aura-time-grid.
demo.component.ts
<aura-time-grid [events]="events" [dayStart]="8" [dayEnd]="18" [showNow]="true" />The “now” line is drawn on the client only — the server has no clock the browser agrees with.
Props
Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.
| Name | Type | Default | Notes |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Draw the current-time line. |
| Name | Type | Default | Notes |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Draw the current-time line. |
| Name | Type | Default | Notes |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Draw the current-time line. |
| Name | Type | Default | Notes |
|---|---|---|---|
| events | TimeGridEvent[] | null | — | { id, day: 0–6, start, duration, label, color? }. |
| dayStart | number | 7 | |
| dayEnd | number | 21 | |
| dayLabels | string[] | ['Mon' … 'Sun'] | |
| showNow | boolean | false | Draw the current-time line. |
Emitted classes
Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.
| Class | Role | Notes |
|---|---|---|
| .aura-timegrid | base | Required. A modifier does nothing without it. |
| .aura-timegrid__head | element | |
| .aura-timegrid__hours | element | |
| .aura-timegrid__hour | element | |
| .aura-timegrid__col | element | |
| .aura-timegrid__slot | element | |
| .aura-timegrid__event | element | |
| .aura-timegrid__now | element |