Work Order Assignment

The process of assigning and unassigning work orders with a large number of employees can get overly complicated. The timeline 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 and 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.

Get started with this example

Demo

Loading the live demo

Preview in full screen

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

Code

View code on GitHub 
<script setup>
import { MbscEventcalendar, setOptions  } from '@mobiscroll/vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

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>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.