std-calendar

Level: Atom | Entity: CalendarEvent | Persistence: runtime

3 states, 4 events, 6 transitions

Live Preview

orbital CalendarEventOrbital {
  entity CalendarEvent [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    date : string
    time : string
    duration : number
  }
  trait CalendarEventCalendar -> CalendarEvent [interaction] {
    initial: month-view
    state month-view {
      INIT -> month-view
        (fetch CalendarEvent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "CalendarEvents Calendar", variant: "h2" }] }, { type: "date-range-selector", startDate: "2026-01-01", endDate: "2026-12-31", onSelect: "SELECT_DAY" }] }, { type: "divider" }, { type: "calendar-grid", month: 3, year: 2026 }, { type: "divider" }, { type: "typography", variant: "h4", content: "Upcoming Events" }, { type: "data-list", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events", emptyDescription: "No events scheduled.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "calendar" }, { name: "time", label: "Time", variant: "badge" }, { name: "date", label: "Date", variant: "caption", format: "date" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "View", event: "SELECT_DAY", icon: "eye" }] }] })
      SELECT_DAY -> day-view
        (fetch CalendarEvent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Day View", variant: "h2" }] }, { type: "button", label: "Back to Month", event: "BACK", variant: "ghost", icon: "arrow-left" }] }, { type: "divider" }, { type: "typography", variant: "h4", content: "Events for Selected Day" }, { type: "data-grid", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events today", emptyDescription: "Select a time slot to add an event.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "clock" }, { name: "time", label: "Time", variant: "badge" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "Select", event: "SELECT_SLOT", icon: "check" }] }] })
    }
    state day-view {
      SELECT_SLOT -> slot-selected
        (set @entity.time @payload.time)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Day View", variant: "h2" }] }, { type: "button", label: "Back to Month", event: "BACK", variant: "ghost", icon: "arrow-left" }] }, { type: "divider" }, { type: "typography", variant: "h4", content: "Events for Selected Day" }, { type: "data-grid", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events today", emptyDescription: "Select a time slot to add an event.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "clock" }, { name: "time", label: "Time", variant: "badge" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "Select", event: "SELECT_SLOT", icon: "check" }] }] })
      BACK -> month-view
        (fetch CalendarEvent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "CalendarEvents Calendar", variant: "h2" }] }, { type: "date-range-selector", startDate: "2026-01-01", endDate: "2026-12-31", onSelect: "SELECT_DAY" }] }, { type: "divider" }, { type: "calendar-grid", month: 3, year: 2026 }, { type: "divider" }, { type: "typography", variant: "h4", content: "Upcoming Events" }, { type: "data-list", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events", emptyDescription: "No events scheduled.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "calendar" }, { name: "time", label: "Time", variant: "badge" }, { name: "date", label: "Date", variant: "caption", format: "date" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "View", event: "SELECT_DAY", icon: "eye" }] }] })
    }
    state slot-selected {
      BACK -> month-view
        (fetch CalendarEvent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "CalendarEvents Calendar", variant: "h2" }] }, { type: "date-range-selector", startDate: "2026-01-01", endDate: "2026-12-31", onSelect: "SELECT_DAY" }] }, { type: "divider" }, { type: "calendar-grid", month: 3, year: 2026 }, { type: "divider" }, { type: "typography", variant: "h4", content: "Upcoming Events" }, { type: "data-list", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events", emptyDescription: "No events scheduled.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "calendar" }, { name: "time", label: "Time", variant: "badge" }, { name: "date", label: "Date", variant: "caption", format: "date" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "View", event: "SELECT_DAY", icon: "eye" }] }] })
      SELECT_DAY -> day-view
        (fetch CalendarEvent)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clock", size: "lg" }, { type: "typography", content: "Day View", variant: "h2" }] }, { type: "button", label: "Back to Month", event: "BACK", variant: "ghost", icon: "arrow-left" }] }, { type: "divider" }, { type: "typography", variant: "h4", content: "Events for Selected Day" }, { type: "data-grid", entity: "CalendarEvent", emptyIcon: "calendar", emptyTitle: "No events today", emptyDescription: "Select a time slot to add an event.", columns: [{ name: "name", label: "Event", variant: "h4", icon: "clock" }, { name: "time", label: "Time", variant: "badge" }, { name: "status", label: "Status", variant: "badge" }], itemActions: [{ label: "Select", event: "SELECT_SLOT", icon: "check" }] }] })
    }
  }
  page "/calendarevents/calendar" -> CalendarEventCalendar
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
date	string	""
time	string	""
duration	number	60

States

State	Type
month-view	Initial
day-view	-
slot-selected	-

Events

Event	Payload
INIT	-
SELECT_DAY	date: string
SELECT_SLOT	time: string
BACK	-

Transitions

From	Event	To	Effects
month-view	INIT	month-view	2 effects
month-view	SELECT_DAY	day-view	2 effects
day-view	SELECT_SLOT	slot-selected	2 effects
day-view	BACK	month-view	2 effects
slot-selected	BACK	month-view	2 effects
slot-selected	SELECT_DAY	day-view	2 effects