# Trigger List

> What starts agents and when: TriggerList and the week view ScheduleCalendar.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/TriggerList/)

What starts agents and when: `TriggerList` and the week view `ScheduleCalendar`.

TriggerList: `items` ({id, type: "schedule" | "event" | "webhook" | "mail", rule, agent, by, next, enabled}), `onToggle(item)`, `onRun(item)`.
ScheduleCalendar: `events` ({day 0–6, start, end (hours), label, sub, tint, self}), `from`, `to`, `days` (labels; defaults to the locale's weekdays), `onOpen(event)`. Events an agent created for itself get a signal outline.

## Example

```tsx
import { ScheduleCalendar, TriggerList } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      className="tf-col"
      style={{
        gap: 16,
      }}
    >
      <div className="tf-panel tf-panel-flush tf-panel-list">
        <TriggerList
          onToggle={() => {}}
          onRun={() => {}}
          items={[
            {
              id: 1,
              type: "schedule",
              rule: "Mon–Fri 08:00",
              agent: "Main Brain",
              by: "Config",
              next: "Tomorrow 08:00",
            },
            {
              id: 2,
              type: "mail",
              rule: "New mail to support@",
              agent: "Atlas",
              by: "Mara Ellis",
              next: "On event",
            },
            {
              id: 3,
              type: "webhook",
              rule: "Stripe dispute opened",
              agent: "Ledger",
              by: "Config",
              next: "On event",
              enabled: false,
            },
          ]}
        />
      </div>
      <div className="tf-panel tf-scroll-x">
        <ScheduleCalendar
          from={7}
          to={19}
          days={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
          events={[
            {
              day: 0,
              start: 8,
              end: 9,
              label: "Briefing",
              tint: "lilac",
            },
            {
              day: 1,
              start: 8,
              end: 9,
              label: "Briefing",
              tint: "lilac",
            },
            {
              day: 2,
              start: 10,
              end: 12,
              label: "Weekly report",
              sub: "Ledger",
              tint: "butter",
            },
            {
              day: 4,
              start: 14,
              end: 15,
              label: "Follow-ups",
              tint: "sky",
              self: true,
            },
          ]}
        />
      </div>
    </div>
  );
}
```

## Props

### ScheduleCalendar

| Prop | Type | Notes |
| --- | --- | --- |
| `events` | `{ day: number; start: number; end: number; label: string; sub?: string; tint?: Tint; self?: boolean; }[]` | Required |
| `from?` | `number` |  |
| `to?` | `number` |  |
| `days?` | `string[]` |  |
| `onOpen?` | `(e: NonNullable<ScheduleCalendarProps["events"]>[number]) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### TriggerList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `{ id: string \| number; type: "schedule" \| "event" \| "webhook" \| "mail"; rule: ReactNode; agent?: string; by?: string; next?: string; enabled?: boolean; }[]` | Required |
| `onToggle?` | `(item: NonNullable<TriggerListProps["items"]>[number]) => void` |  |
| `onRun?` | `(item: NonNullable<TriggerListProps["items"]>[number]) => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |