Angular Timeline Employee Shift Slots Example

Use the slotTemplate option for setting up a custom time slot header. Customize how the time slots look and what they show. Utilize properties passed in the slots array.

Get started with this example

Preview in full screen

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

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { formatDate, MbscCalendarEvent, MbscEventcalendarOptions, MbscModule, setOptions  } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  shifts: MbscCalendarEvent[] = [
    {
      start: '2026-10-24T07:00',
      end: '2026-10-24T13:00',
      title: '07:00 - 13:00',
      resource: 2,
      slot: 1,
    },
    {
      start: '2026-10-24T07:00',
      end: '2026-10-24T13:00',
      title: '07:00 - 13:00',
      resource: 3,
      slot: 1,
    },
    {
      start: '2026-10-24T07:00',
      end: '2026-10-24T13:00',
      title: '07:00 - 13:00',
      resource: 6,
      slot: 1,
    },
    {
      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: 2,
      slot: 1,
    },
    {
      start: '2026-10-25T12:00',
      end: '2026-10-25T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
    {
      start: '2026-10-26T07:00',
      end: '2026-10-26T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-26T07:00',
      end: '2026-10-26T13:00',
      title: '07:00 - 13:00',
      resource: 3,
      slot: 1,
    },
    {
      start: '2026-10-26T12:00',
      end: '2026-10-26T18: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: 2,
      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: 2,
      slot: 2,
    },
    {
      start: '2026-10-28T12:00',
      end: '2026-10-28T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
    {
      start: '2026-10-29T07:00',
      end: '2026-10-29T13:00',
      title: '07:00 - 13:00',
      resource: 1,
      slot: 1,
    },
    {
      start: '2026-10-29T12:00',
      end: '2026-10-29T18:00',
      title: '12:00 - 18:00',
      resource: 3,
      slot: 2,
    },
  ];

  calendarOptions: MbscEventcalendarOptions = {
    view: {
      timeline: {
        type: 'week',
        eventDisplay: 'fill',
        startDay: 1,
        endDay: 5,
      },
    },
    dragToResize: false,
    dragToMove: true,
    clickToCreate: true,
    resources: [
      {
        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',
      },
    ],
    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: (args: any) => {
      const event = args.event;
      const index = this.shifts.findIndex((x) => x.id === event.id);
      this.shifts[index].title = event.slot === 1 ? '07:00 - 13:00' : '12:00 - 18:00';
    },
  };

  defaultShift(ev: any): any {
    const d = ev.start;
    const start = new Date(d.getFullYear(), d.getMonth(), d.getDate(), ev.slot === 1 ? 7 : 12);
    const 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,
      end,
    };
  }
}

<mbsc-eventcalendar
  [data]="shifts"
  [options]="calendarOptions"
  [slotTemplate]="slotTemp"
  [extendDefaultEvent]="defaultShift"
  class="md-shift-template"
>
  <ng-template #slotTemp let-args>
    <div class="md-employees-cont" [ngStyle]="{background: args.slot.id === 1 ? '#a5ceff4d' : '#f7f7bb4d', padding:'4px'}">
      <div class="slot-name">{{args.slot.name}}</div>
      <div class="slot-time">{{args.slot.id === 1 ? '7am - 1pm' : '12pm - 6pm'}}</div>
    </div>
  </ng-template>
</mbsc-eventcalendar>

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

.slot-time {
  opacity: 0.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;
}

Employee Shift Slots

Duplicate Session

Duplicate Session

Demo

Code

Duplicate Session

Duplicate Session