Scheduler

<TimelineScheduler
  resources={resources}
  items={items}
  date={date}
  draggable
  resizable
  creatable
  snapMinutes={15}
  startHour={8}
  endHour={18}
  showDateNav
  showZoomControls
  showNowLine
  showTooltip
  onItemsChange={setItems}
  onDateChange={setDate}
  onItemDragEnd={({ item }) =>
    console.log(`Moved "${item.name}" to ${item.start.toLocaleTimeString()}`)
  }
  onItemResizeEnd={({ item }) =>
    console.log(`Resized "${item.name}": ${item.start} – ${item.end}`)
  }
  onItemCreate={({ resourceId, start }) =>
    console.log(`New event for ${resourceId} at ${start}`)
  }
/>

function renderItem(item: TimelineItem) {
  return (
    <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
      <div
        style={{ width: 3, flexShrink: 0, background: item.color }}
      />
      <div style={{ padding: "3px 6px", overflow: "hidden" }}>
        <div style={{ fontWeight: 600, fontSize: 12, whiteSpace: "nowrap",
          overflow: "hidden", textOverflow: "ellipsis" }}>
          {item.name}
        </div>
        {item.description && (
          <div style={{ fontSize: 11, opacity: 0.7, whiteSpace: "nowrap",
            overflow: "hidden", textOverflow: "ellipsis" }}>
            {item.description}
          </div>
        )}
      </div>
    </div>
  );
}

<TimelineScheduler
  resources={resources}
  items={items}
  date={date}
  renderItem={renderItem}
  draggable
  resizable
  startHour={8}
  endHour={18}
  onItemsChange={setItems}
  onDateChange={setDate}
/>

const resources: Resource[] = [
  { id: "r1", name: "Alice Hansen", avatar: "https://..." },
  { id: "r2", name: "Bob Nilsen",   avatar: "https://..." },
];

<TimelineScheduler
  resources={resources}
  items={items}
  date={date}
  readonly
  showDateNav
  showZoomControls
  showAvatar
  showNowLine
  showTooltip
  startHour={8}
  endHour={18}
  onDateChange={setDate}
/>

// Core data types
interface Resource {
  id:      string;
  name:    string;
  avatar?: string;
}

interface TimelineItem {
  id:           string;
  resourceId:   string;
  name:         string;
  color:        string;
  start:        Date;
  end:          Date;
  description?: string;
}

// Callback detail types
interface ItemCreateDetail      { resourceId: string; start: Date; end: Date }
interface ItemClickDetail       { item: TimelineItem }
interface ItemDblClickDetail    { item: TimelineItem }
interface ItemHoverDetail       { item: TimelineItem; type: "enter" | "leave" }
interface ItemContextMenuDetail { item: TimelineItem; x: number; y: number }
interface ItemDragStartDetail   { item: TimelineItem }
interface ItemDragEndDetail     { item: TimelineItem; resourceId: string; start: Date; end: Date }
interface ItemResizeStartDetail { item: TimelineItem }
interface ItemResizeEndDetail   { item: TimelineItem; start: Date; end: Date }