---
title: "Vue Timeline Work Order Assignment Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/assign-unassign-work-orders-fixed-top-row"
---

# Work Order Assignment - Vue Timeline demo

Assign work orders to employees on a Vue Timeline — keep unassigned orders in a fixed top row while scrolling, and drag to assign without changing time. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/timeline/assign-unassign-work-orders-fixed-top-row)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/assign-unassign-work-orders-fixed-top-row)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/timeline/assign-unassign-work-orders-fixed-top-row)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/assign-unassign-work-orders-fixed-top-row.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/assign-unassign-work-orders-fixed-top-row.md), [Angular](https://demo.mobiscroll.com/angular/timeline/assign-unassign-work-orders-fixed-top-row.md), [React](https://demo.mobiscroll.com/react/timeline/assign-unassign-work-orders-fixed-top-row.md)

## Description

The process of assigning and unassigning work orders with a large number of employees can get overly complicated. The [timeline](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) with a row fixed to the top, containing the unassigned work orders, can be of great help to create a work planner.

This will contain all scheduled but unassigned work and by vertically scrolling the content of the timeline, the row will allways be visible and stuck to the top. The following resources are the employees themselves, where `eventOverlap` is not allowed to avoid double scheduling.

For more strict validation, the [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) and [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) options are set to `false` rendering the workorders fixed in time and only allowing vertical movement between and to resources for re-assignment and assignment.

## What this demo shows

- A desktop timeline view for assigning and unassigning work orders across multiple resources in a Monday-to-Friday work week.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed date strip shows the selected Monday-to-Friday work week in `DD DDD MMM YYYY` format, with the current date highlighted.
- **Invalid periods** Past dates are disabled, so work orders cannot be created or assigned in invalid time ranges.
- **Time grid** The timeline displays working hours from 6 AM to 6 PM with hourly columns under each day.
- **Resources** The Unassigned resource row stays fixed at the top and holds work orders that are waiting to be assigned to a technician.
- **Employee rows** The timeline lists 9 employee resources below the fixed Unassigned row.
- **Current time** The current time is marked with a vertical blue line and a time label.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Work orders are displayed as cards with a colored stripe, a bold title, and the exact start and end time.
- **Unassigned events** Work orders in the Unassigned row appear in gray until they are assigned to an employee resource.
- **Assignment behavior** Work orders can be dragged between employee resources, assigned from the Unassigned row, or moved back to the Unassigned row.
- **Time locking** Work orders are fixed in time, so dragging changes the assigned resource but does not change the work order's start time, end time, or duration.
- **Resource colors** Assigned work orders use a consistent color per resource, so work orders for the same employee share the same color.
- **Event overlapping** Overlapping work orders stack within the resource row so each one remains visible, with the row height increasing as needed.
- **Event creation** New work orders can be created by double-clicking in the timeline or by dragging across a time range.
- **Event interaction** Work orders highlight on hover and can be dragged vertically between resources.
- **Event selection** Clicking a work order selects and highlights it.
- **Vertical scrolling** The resource area scrolls vertically while the Unassigned row remains fixed at the top.
- **Horizontal scrolling** The timeline supports horizontal scrolling for navigating the visible date and time grid.

## Best for

- **Field service management** Tracking scheduled work orders before and after they are assigned to available technicians.
- **Technician dispatching** Assigning jobs to employee resources while keeping unassigned work visible at the top of the schedule.
- **Maintenance scheduling** Planning maintenance tasks across a fixed work week and preventing assignments in past or invalid time ranges.
- **Repair planning** Managing repair jobs with fixed start times, end times, and durations.
- **Work order assignment** Reassigning jobs between resources without allowing the scheduled time or duration to change.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`min`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-min) - option

## Code

### SFC JS

```vue
<script setup>
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = [
  {
    start: '2026-10-22T16:00',
    end: '2026-10-22T18:00',
    title: 'Work order #85884',
    resource: 1
  },
  {
    start: '2026-10-22T15:00',
    end: '2026-10-22T18:00',
    title: 'Work order #16543',
    resource: 1
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T16:00',
    title: 'Work order #52376',
    resource: 1
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T18:00',
    title: 'Work order #97268',
    resource: 1
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T08:00',
    title: 'Work order #48585',
    resource: 1
  },
  {
    start: '2026-10-23T09:00',
    end: '2026-10-23T12:00',
    title: 'Work order #93534',
    resource: 1
  },
  {
    start: '2026-10-23T07:00',
    end: '2026-10-23T13:00',
    title: 'Work order #34630',
    resource: 1
  },
  {
    start: '2026-10-23T12:00',
    end: '2026-10-23T14:00',
    title: 'Work order #59332',
    resource: 1
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T18:00',
    title: 'Work order #20165',
    resource: 1
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T17:00',
    title: 'Work order #23446',
    resource: 1
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T11:00',
    title: 'Work order #07029',
    resource: 1
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T09:00',
    title: 'Work order #43339',
    resource: 1
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T13:00',
    title: 'Work order #44976',
    resource: 1
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T08:00',
    title: 'Work order #42752',
    resource: 1
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T12:00',
    title: 'Work order #55593',
    resource: 1
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T13:00',
    title: 'Work order #86969',
    resource: 1
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #39933',
    resource: 1
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T18:00',
    title: 'Work order #26899',
    resource: 1
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T17:00',
    title: 'Work order #86327',
    resource: 1
  },
  {
    start: '2026-10-25T10:08',
    end: '2026-10-25T11:14',
    title: 'Work order #05183',
    resource: 1
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T09:00',
    title: 'Work order #60657',
    resource: 1
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T13:00',
    title: 'Work order #94701',
    resource: 1
  },
  {
    start: '2026-10-26T06:00',
    end: '2026-10-26T08:00',
    title: 'Work order #23487',
    resource: 1
  },
  {
    start: '2026-10-26T09:00',
    end: '2026-10-26T12:00',
    title: 'Work order #79070',
    resource: 1
  },
  {
    start: '2026-10-26T07:00',
    end: '2026-10-26T13:00',
    title: 'Work order #33909',
    resource: 1
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T17:00',
    title: 'Work order #88532',
    resource: 2
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T09:00',
    title: 'Work order #26661',
    resource: 2
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T18:00',
    title: 'Work order #99287',
    resource: 2
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T18:00',
    title: 'Work order #63266',
    resource: 2
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T18:00',
    title: 'Work order #40352',
    resource: 3
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T10:00',
    title: 'Work order #74954',
    resource: 3
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T13:00',
    title: 'Work order #83242',
    resource: 3
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T14:00',
    title: 'Work order #40527',
    resource: 3
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T13:00',
    title: 'Work order #32765',
    resource: 3
  },
  {
    start: '2026-10-25T10:00',
    end: '2026-10-25T13:00',
    title: 'Work order #35417',
    resource: 3
  },
  {
    start: '2026-10-22T08:00',
    end: '2026-10-22T10:00',
    title: 'Work order #61083',
    resource: 4
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T14:00',
    title: 'Work order #95696',
    resource: 4
  },
  {
    start: '2026-10-23T14:00',
    end: '2026-10-23T16:00',
    title: 'Work order #84834',
    resource: 4
  },
  {
    start: '2026-10-23T16:00',
    end: '2026-10-23T18:00',
    title: 'Work order #75277',
    resource: 4
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #82197',
    resource: 4
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T10:00',
    title: 'Work order #22580',
    resource: 4
  },
  {
    start: '2026-10-25T16:00',
    end: '2026-10-25T18:00',
    title: 'Work order #24495',
    resource: 4
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T11:00',
    title: 'Work order #52180',
    resource: 5
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:00',
    title: 'Work order #41989',
    resource: 5
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T08:00',
    title: 'Work order #68289',
    resource: 5
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T10:00',
    title: 'Work order #08025',
    resource: 5
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T15:00',
    title: 'Work order #71563',
    resource: 5
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T15:00',
    title: 'Work order #85448',
    resource: 6
  },
  {
    start: '2026-10-23T14:00',
    end: '2026-10-23T18:00',
    title: 'Work order #00802',
    resource: 6
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T09:00',
    title: 'Work order #11659',
    resource: 6
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T16:00',
    title: 'Work order #79903',
    resource: 6
  },
  {
    start: '2026-10-25T16:00',
    end: '2026-10-25T18:00',
    title: 'Work order #92281',
    resource: 6
  },
  {
    start: '2026-10-25T12:00',
    end: '2026-10-25T14:00',
    title: 'Work order #17912',
    resource: 6
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T14:00',
    title: 'Work order #56823',
    resource: 7
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #56366',
    resource: 7
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T16:00',
    title: 'Work order #28671',
    resource: 7
  },
  {
    start: '2026-10-24T16:00',
    end: '2026-10-24T18:00',
    title: 'Work order #60491',
    resource: 7
  },
  {
    start: '2026-10-25T17:00',
    end: '2026-10-25T18:00',
    title: 'Work order #42901',
    resource: 7
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T18:00',
    title: 'Work order #90838',
    resource: 8
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T12:00',
    title: 'Work order #61919',
    resource: 8
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T18:00',
    title: 'Work order #59672',
    resource: 8
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T08:00',
    title: 'Work order #60923',
    resource: 8
  },
  {
    start: '2026-10-23T12:00',
    end: '2026-10-23T14:00',
    title: 'Work order #04985',
    resource: 9
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T18:00',
    title: 'Work order #18580',
    resource: 9
  },
  {
    start: '2026-10-24T08:00',
    end: '2026-10-24T12:00',
    title: 'Work order #60443',
    resource: 9
  },
  {
    start: '2026-10-24T08:00',
    end: '2026-10-24T14:00',
    title: 'Work order #16725',
    resource: 10
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T14:00',
    title: 'Work order #44331',
    resource: 10
  }
]

const myResources = [
  {
    id: 1,
    name: 'Unassigned',
    color: '#c8cdcf',
    fixed: true
  },
  {
    id: 2,
    name: 'James',
    color: '#76e083'
  },
  {
    id: 3,
    name: 'Joseph',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'David',
    color: '#d6d145'
  },
  {
    id: 5,
    name: 'Daniel',
    color: '#e25dd2'
  },
  {
    id: 6,
    name: 'Thomas',
    color: '#4caf00'
  },
  {
    id: 7,
    name: 'Michael',
    color: '#843100'
  },
  {
    id: 8,
    name: 'Samuel',
    color: '#843100'
  },
  {
    id: 9,
    name: 'Benjamin',
    color: '#42bcf5'
  },
  {
    id: 10,
    name: 'John',
    color: '#f542ef'
  }
]

const min = '2026-10-22T06:00'

const myView = {
  timeline: {
    type: 'week',
    resolutionHorizontal: 'hour',
    startTime: '06:00',
    endTime: '18:00',
    startDay: 1,
    endDay: 5
  }
}
</script>

<template>
  <MbscEventcalendar
    :dragToMove="true"
    :dragInTime="false"
    :dragToResize="false"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :min="min"
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents: MbscCalendarEvent[] = [
  {
    start: '2026-10-22T16:00',
    end: '2026-10-22T18:00',
    title: 'Work order #85884',
    resource: 1
  },
  {
    start: '2026-10-22T15:00',
    end: '2026-10-22T18:00',
    title: 'Work order #16543',
    resource: 1
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T16:00',
    title: 'Work order #52376',
    resource: 1
  },
  {
    start: '2026-10-22T14:00',
    end: '2026-10-22T18:00',
    title: 'Work order #97268',
    resource: 1
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T08:00',
    title: 'Work order #48585',
    resource: 1
  },
  {
    start: '2026-10-23T09:00',
    end: '2026-10-23T12:00',
    title: 'Work order #93534',
    resource: 1
  },
  {
    start: '2026-10-23T07:00',
    end: '2026-10-23T13:00',
    title: 'Work order #34630',
    resource: 1
  },
  {
    start: '2026-10-23T12:00',
    end: '2026-10-23T14:00',
    title: 'Work order #59332',
    resource: 1
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T18:00',
    title: 'Work order #20165',
    resource: 1
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-23T17:00',
    title: 'Work order #23446',
    resource: 1
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T11:00',
    title: 'Work order #07029',
    resource: 1
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T09:00',
    title: 'Work order #43339',
    resource: 1
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T13:00',
    title: 'Work order #44976',
    resource: 1
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T08:00',
    title: 'Work order #42752',
    resource: 1
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T12:00',
    title: 'Work order #55593',
    resource: 1
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T13:00',
    title: 'Work order #86969',
    resource: 1
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #39933',
    resource: 1
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T18:00',
    title: 'Work order #26899',
    resource: 1
  },
  {
    start: '2026-10-25T13:00',
    end: '2026-10-25T17:00',
    title: 'Work order #86327',
    resource: 1
  },
  {
    start: '2026-10-25T10:08',
    end: '2026-10-25T11:14',
    title: 'Work order #05183',
    resource: 1
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T09:00',
    title: 'Work order #60657',
    resource: 1
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T13:00',
    title: 'Work order #94701',
    resource: 1
  },
  {
    start: '2026-10-26T06:00',
    end: '2026-10-26T08:00',
    title: 'Work order #23487',
    resource: 1
  },
  {
    start: '2026-10-26T09:00',
    end: '2026-10-26T12:00',
    title: 'Work order #79070',
    resource: 1
  },
  {
    start: '2026-10-26T07:00',
    end: '2026-10-26T13:00',
    title: 'Work order #33909',
    resource: 1
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T17:00',
    title: 'Work order #88532',
    resource: 2
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T09:00',
    title: 'Work order #26661',
    resource: 2
  },
  {
    start: '2026-10-24T15:00',
    end: '2026-10-24T18:00',
    title: 'Work order #99287',
    resource: 2
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T18:00',
    title: 'Work order #63266',
    resource: 2
  },
  {
    start: '2026-10-22T10:00',
    end: '2026-10-22T18:00',
    title: 'Work order #40352',
    resource: 3
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T10:00',
    title: 'Work order #74954',
    resource: 3
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T13:00',
    title: 'Work order #83242',
    resource: 3
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T14:00',
    title: 'Work order #40527',
    resource: 3
  },
  {
    start: '2026-10-25T11:00',
    end: '2026-10-25T13:00',
    title: 'Work order #32765',
    resource: 3
  },
  {
    start: '2026-10-25T10:00',
    end: '2026-10-25T13:00',
    title: 'Work order #35417',
    resource: 3
  },
  {
    start: '2026-10-22T08:00',
    end: '2026-10-22T10:00',
    title: 'Work order #61083',
    resource: 4
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T14:00',
    title: 'Work order #95696',
    resource: 4
  },
  {
    start: '2026-10-23T14:00',
    end: '2026-10-23T16:00',
    title: 'Work order #84834',
    resource: 4
  },
  {
    start: '2026-10-23T16:00',
    end: '2026-10-23T18:00',
    title: 'Work order #75277',
    resource: 4
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #82197',
    resource: 4
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T10:00',
    title: 'Work order #22580',
    resource: 4
  },
  {
    start: '2026-10-25T16:00',
    end: '2026-10-25T18:00',
    title: 'Work order #24495',
    resource: 4
  },
  {
    start: '2026-10-23T10:00',
    end: '2026-10-23T11:00',
    title: 'Work order #52180',
    resource: 5
  },
  {
    start: '2026-10-23T11:00',
    end: '2026-10-23T12:00',
    title: 'Work order #41989',
    resource: 5
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T08:00',
    title: 'Work order #68289',
    resource: 5
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T10:00',
    title: 'Work order #08025',
    resource: 5
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T15:00',
    title: 'Work order #71563',
    resource: 5
  },
  {
    start: '2026-10-22T11:00',
    end: '2026-10-22T15:00',
    title: 'Work order #85448',
    resource: 6
  },
  {
    start: '2026-10-23T14:00',
    end: '2026-10-23T18:00',
    title: 'Work order #00802',
    resource: 6
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T09:00',
    title: 'Work order #11659',
    resource: 6
  },
  {
    start: '2026-10-24T09:00',
    end: '2026-10-24T16:00',
    title: 'Work order #79903',
    resource: 6
  },
  {
    start: '2026-10-25T16:00',
    end: '2026-10-25T18:00',
    title: 'Work order #92281',
    resource: 6
  },
  {
    start: '2026-10-25T12:00',
    end: '2026-10-25T14:00',
    title: 'Work order #17912',
    resource: 6
  },
  {
    start: '2026-10-23T06:00',
    end: '2026-10-23T14:00',
    title: 'Work order #56823',
    resource: 7
  },
  {
    start: '2026-10-24T12:00',
    end: '2026-10-24T14:00',
    title: 'Work order #56366',
    resource: 7
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T16:00',
    title: 'Work order #28671',
    resource: 7
  },
  {
    start: '2026-10-24T16:00',
    end: '2026-10-24T18:00',
    title: 'Work order #60491',
    resource: 7
  },
  {
    start: '2026-10-25T17:00',
    end: '2026-10-25T18:00',
    title: 'Work order #42901',
    resource: 7
  },
  {
    start: '2026-10-22T12:00',
    end: '2026-10-22T18:00',
    title: 'Work order #90838',
    resource: 8
  },
  {
    start: '2026-10-24T06:00',
    end: '2026-10-24T12:00',
    title: 'Work order #61919',
    resource: 8
  },
  {
    start: '2026-10-24T14:00',
    end: '2026-10-24T18:00',
    title: 'Work order #59672',
    resource: 8
  },
  {
    start: '2026-10-25T06:00',
    end: '2026-10-25T08:00',
    title: 'Work order #60923',
    resource: 8
  },
  {
    start: '2026-10-23T12:00',
    end: '2026-10-23T14:00',
    title: 'Work order #04985',
    resource: 9
  },
  {
    start: '2026-10-23T15:00',
    end: '2026-10-23T18:00',
    title: 'Work order #18580',
    resource: 9
  },
  {
    start: '2026-10-24T08:00',
    end: '2026-10-24T12:00',
    title: 'Work order #60443',
    resource: 9
  },
  {
    start: '2026-10-24T08:00',
    end: '2026-10-24T14:00',
    title: 'Work order #16725',
    resource: 10
  },
  {
    start: '2026-10-25T08:00',
    end: '2026-10-25T14:00',
    title: 'Work order #44331',
    resource: 10
  }
]

const myResources: MbscResource[] = [
  {
    id: 1,
    name: 'Unassigned',
    color: '#c8cdcf',
    fixed: true
  },
  {
    id: 2,
    name: 'James',
    color: '#76e083'
  },
  {
    id: 3,
    name: 'Joseph',
    color: '#4981d6'
  },
  {
    id: 4,
    name: 'David',
    color: '#d6d145'
  },
  {
    id: 5,
    name: 'Daniel',
    color: '#e25dd2'
  },
  {
    id: 6,
    name: 'Thomas',
    color: '#4caf00'
  },
  {
    id: 7,
    name: 'Michael',
    color: '#843100'
  },
  {
    id: 8,
    name: 'Samuel',
    color: '#843100'
  },
  {
    id: 9,
    name: 'Benjamin',
    color: '#42bcf5'
  },
  {
    id: 10,
    name: 'John',
    color: '#f542ef'
  }
]

const min = '2026-10-22T06:00'

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'week',
    resolutionHorizontal: 'hour',
    startTime: '06:00',
    endTime: '18:00',
    startDay: 1,
    endDay: 5
  }
}
</script>

<template>
  <MbscEventcalendar
    :dragToMove="true"
    :dragInTime="false"
    :dragToResize="false"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    :min="min"
  />
</template>
```

## Implementation notes

- Set `fixed: true` on the "Unassigned" resource so its row stays pinned at the top of the timeline while the employee rows scroll beneath it.
- Use `type: 'week'` with `startDay: 1`/`endDay: 5`, `startTime: '06:00'`/`endTime: '18:00'`, and `resolutionHorizontal: 'hour'` for a Mon-Fri hourly view.
- Set `dragToMove: true` so work orders can be dragged between the Unassigned row and employee rows.
- Set `dragInTime: false` to restrict dragging to vertical (resource) movement only - the time slot of a work order cannot change, only its assigned resource.
- Set `dragToResize: false` to keep work order durations fixed.
- Use the `min` option to prevent navigating or dropping events before the earliest allowed date.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Compare Resources Fixed at Top](https://demo.mobiscroll.com/vue/timeline/compare-resources-fixed-at-top.md) - Use the Vue Timeline to pin up to 3 resources to a fixed comparison section at the top — compare schedules side by side while the rest scroll below.
- Next: [Task Checklist in Events](https://demo.mobiscroll.com/vue/timeline/check-list-tasks-within-events.md) - Render a task checklist inside each Vue Timeline event card — row heights expand as the list grows, and a popup let users add new subtasks.