---
title: "JQuery Timeline Employee Shift Slots Example | Mobiscroll"
component: "Timeline"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/timeline/shift-template"
---

# Employee Shift Slots - jQuery Timeline demo

Build a JQuery Timeline with custom shift slot headers — replace hourly intervals with Morning and Afternoon, each with its own time range and color.

- [Live demo](https://demo.mobiscroll.com/jquery/timeline/shift-template)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/timeline/shift-template)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/shift-template.md), [Angular](https://demo.mobiscroll.com/angular/timeline/shift-template.md), [React](https://demo.mobiscroll.com/react/timeline/shift-template.md), [Vue](https://demo.mobiscroll.com/vue/timeline/shift-template.md)

## Description

Use the [`renderSlot`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderSlot) option for rendering a custom time slot header. Customize how the time slots look and what they show. Utilize properties passed in the [`slots` array](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-slots).

## What this demo shows

- A desktop timeline configured as a Monday-to-Friday week view where days are arranged horizontally and resources are listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between weeks, and the Today button returns to the current date.
- **Week view** The date strip shows the selected work week from Monday to Friday, with the current date highlighted.
- **Resources** Employees are listed as separate timeline rows on the left.
- **Shift slots** Each day is divided into Morning and Afternoon slots instead of standard hourly intervals.
- **Custom slot headers** The slot headers show business-specific shift names with their time ranges, such as Morning 7:00-13:00 and Afternoon 12:00-18:00.
- **Slot background** Morning slots have a blue background while afternoon slots have a yellow background color.
- **Event duration** Shift events fill the predefined slot duration instead of representing individual appointment lengths.
- **Event styling** Different shift types use color-coded styling.
- **Event labels** Events appear as colored labels with the start and end time shown in bold.
- **Date positioning** Events are placed by assigned employee, day, and shift slot.
- **Event interaction** Events highlight on hover.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New shift events can be created by double-clicking the timeline.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating across dates, slots, and resources.

## Best for

- **Employee shift planning** Assigning employees to predefined shifts across consecutive workdays.
- **Coverage review** Checking employee availability and shift coverage across Morning and Afternoon periods.
- **Workforce scheduling** Building scheduling interfaces for manufacturing, healthcare, retail, hospitality, field service, and similar operations.
- **Shift-based timelines** Showing scheduled work blocks where the important unit is the shift, not an individual hourly appointment.
- **Business-specific time slots** Replacing standard time intervals with custom slot labels that match the organization's scheduling model.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-resources) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`colors`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-colors) - option
- [`slots`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-slots) - option
- [`onEventUpdate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventUpdate) - event
- [`updateEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-updateEvent) - method
- [`renderSlot`](https://mobiscroll.com/docs/jquery/eventcalendar/api#renderer-renderSlot) - renderer
- [`extendDefaultEvent`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-extendDefaultEvent) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

$(function () {
  var formatDate = mobiscroll.formatDate;
  var staff = [
    {
      id: 1,
      name: 'Ryan',
      color: '#e20000',
      title: 'Cloud System Engineer',
      img: 'https://img.mobiscroll.com/demos/m1.png',
    },
    {
      id: 2,
      name: 'Kate',
      color: '#60e81a',
      title: 'Help Desk Specialist',
      img: 'https://img.mobiscroll.com/demos/f1.png',
    },
    {
      id: 3,
      name: 'John',
      color: '#3ba7ff',
      title: 'Application Developer',
      img: 'https://img.mobiscroll.com/demos/m2.png',
    },
  ];

  var shifts = [
    {
      start: '2026-10-23T07:00',
      end: '2026-10-23T13:00',
      title: '07:00 - 13:00',
      resource: 2,
      slot: 1,
    },
    {
      start: '2026-10-23T07:00',
      end: '2026-10-23T13:00',
      title: '07:00 - 13:00',
      resource: 3,
      slot: 1,
    },
    {
      start: '2026-10-23T07:00',
      end: '2026-10-23T13:00',
      title: '07:00 - 13:00',
      resource: 6,
      slot: 1,
    },
    {
      start: '2026-10-24T07:00',
      end: '2026-10-24T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-24T07:00',
      end: '2026-10-24T13:00',
      title: '07:00 - 13:00',
      resource: 2,
      slot: 1,
    },
    {
      start: '2026-10-24T12:00',
      end: '2026-10-24T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
    {
      start: '2026-10-25T07:00',
      end: '2026-10-25T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-25T07:00',
      end: '2026-10-25T13:00',
      title: '07:00 - 13:00',
      resource: 3,
      slot: 1,
    },
    {
      start: '2026-10-25T12:00',
      end: '2026-10-25T18:00',
      title: '12:00 - 18:00',
      resource: 2,
      slot: 2,
    },
    {
      start: '2026-10-26T12:00',
      end: '2026-10-26T18:00',
      title: '12:00 - 18:00',
      resource: 2,
      slot: 2,
    },
    {
      start: '2026-10-27T07:00',
      end: '2026-10-27T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-27T12:00',
      end: '2026-10-27T18:00',
      title: '12:00 - 18:00',
      resource: 2,
      slot: 2,
    },
    {
      start: '2026-10-27T12:00',
      end: '2026-10-27T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
    {
      start: '2026-10-28T07:00',
      end: '2026-10-28T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-28T12:00',
      end: '2026-10-28T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
  ];

  $('#demo-shift-template')
    .mobiscroll()
    .eventcalendar({
      view: {
        timeline: {
          type: 'week',
          eventDisplay: 'fill',
          startDay: 1,
          endDay: 5,
        },
      },
      data: shifts,
      resources: staff,
      clickToCreate: true,
      dragToMove: true,
      dragToResize: false,
      colors: [
        {
          background: '#a5ceff4d',
          slot: 1,
          recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR',
          },
        },
        {
          background: '#f7f7bb4d',
          slot: 2,
          recurring: {
            repeat: 'weekly',
            weekDays: 'MO,TU,WE,TH,FR',
          },
        },
      ],
      slots: [
        {
          id: 1,
          name: 'Morning',
        },
        {
          id: 2,
          name: 'Afternoon',
        },
      ],
      onEventUpdate: function (args, inst) {
        var event = $.extend({}, args.event);
        event.title = event.slot === 1 ? '07:00 - 13:00' : '12:00 - 18:00';
        inst.updateEvent(event);
        return false;
      },
      renderSlot: function (args) {
        var slotId = args.slot.id;
        return (
          '<div style="background:' +
          (slotId == 1 ? '#a5ceff4d' : '#f7f7bb4d') +
          ';padding:4px;">' +
          '<div class="slot-name">' +
          args.slot.name +
          '</div>' +
          '<div class="slot-time">' +
          (slotId == 1 ? '7am - 1pm' : '12pm - 6pm') +
          '</div>' +
          '</div>'
        );
      },
      extendDefaultEvent: function (ev) {
        var d = ev.start;
        var start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), ev.slot == 1 ? 7 : 12);
        var end = new Date(d.getFullYear(), d.getMonth(), d.getDate(), ev.slot == 1 ? 13 : 18);

        return {
          title: formatDate('HH:mm', start) + ' - ' + formatDate('HH:mm', end),
          start: start,
          end: end,
        };
      },
    });
});
```

### HTML

```html
<div id="demo-shift-template" class="md-shift-template"></div>
```

### CSS

```css
.slot-name {
    line-height: 20px;
    font-size: 15px;
}

.slot-time {
    opacity: .5;
    line-height: 20px;
    font-size: 13px;
}

.md-shift-template .mbsc-timeline-header-placeholder {
    height: 74px;
}

.md-shift-template .mbsc-timeline-slots {
    height: 48px;
    text-align: center;
}

.md-shift-template .mbsc-schedule-event {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.md-shift-template .mbsc-timeline-slot-title {
    padding: 0;
}
```

## Implementation notes

- Use `timeline: { type: 'week', eventDisplay: 'fill', startDay: 1, endDay: 5 }` - a Mon-Fri week view where events fill the full height of their slot row.
- Define 3 staff resources (Ryan, Kate, John), each with `id`, `name`, `color`, `title` (job title), and `img` (avatar URL).
- Define 2 slots: `{ id: 1, name: 'Morning' }` and `{ id: 2, name: 'Afternoon' }`. Each event carries a `slot` property (1 or 2) matching one of these IDs. Morning shift covers 7:00-13:00; afternoon covers 12:00-18:00. Event `title` is the formatted time range (e.g. `'07:00 - 13:00'`).
- Use the `colors` array to apply a semi-transparent background to each slot column across all weekdays. Each entry specifies `background`, `slot` (the slot ID), and `recurring: { repeat: 'weekly', weekDays: 'MO,TU,WE,TH,FR' }`.
- Use `renderSlot` (Angular: `slotTemplate`, Vue: `#slot`) to render a custom slot header. The renderer receives `args` with `args.slot` - the slot object from the `slots` array (has `args.slot.id` and `args.slot.name`). Render the slot name and its time range string derived from `args.slot.id`.
- Use `extendDefaultEvent` to set correct defaults when a new event is created via click-to-create. The function receives `args` with `args.start` and `args.slot`. Compute `start` and `end` Date objects using the slot's hours (slot 1 → 7:00-13:00, slot 2 → 12:00-18:00), then return `{ title, start, end }` where `title` is formatted with `formatDate('HH:mm', start) + ' - ' + formatDate('HH:mm', end)`.
- Handle `onEventUpdate`: when a drag-to-move moves an event to a different slot, update the event's `title` to match the new slot's time range.
- Set `clickToCreate: true`, `dragToMove: true`, `dragToResize: false`.

## 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-jquery.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 jquery
   ```

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 jquery --trial`.

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

## Related demos

- Previous: [Header and Footer Template](https://demo.mobiscroll.com/jquery/timeline/hour-day-week-month-quarter-year-header-footer-template.md) - Customize time-scale headers and add occupancy footers to a JQuery Timeline — format cells from hour to year and display per-slot utilization.
- Next: [Resource Header Customization](https://demo.mobiscroll.com/jquery/timeline/resource-header-template.md) - Add custom filters, labels, or contextual UI to JQuery Timeline resource headers — useful for room booking and resource scheduling views.