A horizontal resource timeline: one row per resource, bars across a continuous multi-day axis, overlaps stacked into lanes.
On this page
The timeline view turns the scheduler sideways: resources become rows and
time runs horizontally across a continuous multi-day axis — bars are not
split at midnight. Overlapping bars in a row stack into sub-lanes and the
row grows to fit.
<script setup lang="ts">
import { CScheduler } from '@coreui/vue-scheduler'
const resources = [
{ id: 'room-1', label: 'Room 1' },
{ id: 'room-2', label: 'Room 2', color: '#2eb85c' },
{ id: 'room-3', label: 'Room 3', color: '#e55353' }
]
const pad = (n: number) => String(n).padStart(2, '0')
const day = (offset: number) => {
const date = new Date()
date.setDate(date.getDate() - ((date.getDay() + 6) % 7) + offset)
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`
}
const events = [
{ id: 'board', title: 'Board meeting', resourceId: 'room-1', start: `${day(0)}T09:00`, end: `${day(0)}T11:00` },
{ id: 'sprint', title: 'Sprint', resourceId: 'room-1', start: `${day(0)}T10:00`, end: `${day(1)}T16:00` },
{ id: 'workshop', title: 'Workshop', resourceId: 'room-2', start: `${day(1)}T09:00`, end: `${day(2)}T12:00` },
{ id: 'audit', title: 'Audit', resourceId: 'room-3', start: day(2), end: day(4), allDay: true }
]
</script>
<template>
<CScheduler
view="timeline"
:timeline-days="5"
:timeline-hour-width="40"
:resources="resources"
:events="events"
/>
</template>Configuration
| Prop | Default | Description |
|---|---|---|
timelineDays | 7 | Days covered (and stepped by prev/next). |
timelineHourWidth | 48 | Pixels per hour — the horizontal zoom. |
The resource label column width is the
--cui-scheduler-timeline-label-width token (default 10rem).
Interactions
- Drag a bar horizontally to move it in time (snapped), or into another row to reassign its resource.
- Drag a bar edge to resize; all-day bars snap to whole days.
- Drag across empty space in a row to create an event there.
- Keyboard: grab with Enter, move in time with ←/→, between resources with ↑/↓, confirm with Enter. F2 opens the edit dialog. Creating by keyboard is currently available in the time-grid views only.