Task Progress Tracking

Showing percentage progress, or even having a visual overlay that indicates the progress of a task is sometimes necessary, not just for full fledged Gantt charts. Although being usually associated with Gantt charts, having a clear overview of progress with tools that enable live update is useful in a lot of situations.

Using the event templating capabilities, it is possible to render a live slider that reacts on hover and enables updating the progress inline. Use the timelineEventTemplate option to customize the template and adjust it to your needs.

Besides being able to update progress right on the event, it is also possible to add a slider that controls task progression - saved in a custom property of the event - inside an add/edit dialog.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Show task completion progress on Timeline events with an inline hover slider for live updates and a progress field in the add/edit dialog.

Code

View code on GitHub 
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MbscCalendarEvent,
  MbscDatepickerOptions,
  MbscDateType,
  MbscEventcalendarOptions,
  MbscModule,
  MbscPopup,
  MbscPopupButton,
  MbscPopupOptions,
  setOptions ,
} from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule, MbscModule],
})
export class AppComponent {
  @ViewChild('popup', { static: false })
  popup!: MbscPopup;

  popupEventTitle: string | undefined;
  popupEventProgress = 0;
  popupEventResource: string | undefined;
  popupEventDates: (MbscDateType | undefined)[] = [];

  isDraggingProgress = false;

  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-22T00:00',
      end: '2026-10-25T00:00',
      title: 'Design Homepage',
      resource: 'alice',
      progress: 100,
    },
    {
      start: '2026-10-22T00:00',
      end: '2026-10-26T00:00',
      title: 'Create Wireframes',
      resource: 'bob',
      progress: 100,
    },
    {
      start: '2026-10-24T00:00',
      end: '2026-10-29T00:00',
      title: 'Develop Frontend',
      resource: 'charlie',
      progress: 45,
    },
    {
      start: '2026-10-24T00:00',
      end: '2026-10-29T00:00',
      title: 'Develop Backend',
      resource: 'dave',
      progress: 35,
    },
    {
      start: '2026-10-29T00:00',
      end: '2026-11-02T00:00',
      title: 'Test Website',
      resource: 'erin',
      progress: 0,
    },
    {
      start: '2026-10-26T00:00',
      end: '2026-11-02T00:00',
      title: 'Fix Bugs',
      resource: 'frank',
      progress: 0,
    },
    {
      start: '2026-11-02T00:00',
      end: '2026-11-05T00:00',
      title: 'Deploy Website',
      resource: 'george',
      progress: 0,
    },
  ];

  myResources = [
    {
      id: 'gro1',
      name: 'Designer Team',
      color: '#76e083',
      eventCreation: false,
      children: [
        {
          id: 'alice',
          name: 'Alice',
          title: 'Designer',
          color: '#1dab2f',
        },
        {
          id: 'bob',
          name: 'Bob',
          title: 'Designer',
          color: '#76e083',
        },
      ],
    },
    {
      id: 'gro2',
      name: 'Development Team',
      color: '#ff1717',
      eventCreation: false,
      children: [
        {
          id: 'charlie',
          name: 'Charlie',
          title: 'Frontend Developer',
          color: '#4981d6',
        },
        {
          id: 'dave',
          name: 'Dave',
          title: 'Backend Developer',
          color: '#f7961e',
        },
        {
          id: 'frank',
          name: 'Frank',
          title: 'Full-Stack Developer',
          color: '#34c8e0',
        },
        {
          id: 'george',
          name: 'George',
          title: 'DevOps Engineer',
          color: '#e25dd2',
        },
      ],
    },

    {
      id: 'gro3',
      name: 'QA Team',
      color: '#d6d145',
      eventCreation: false,
      children: [
        {
          id: 'erin',
          name: 'Erin',
          title: 'QA Tester',
          color: '#d6d145',
        },
      ],
    },
  ];

  calendarOptions: MbscEventcalendarOptions = {
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    view: {
      timeline: { type: 'month', eventDisplay: 'fill' },
    },
    onEventClick: (args) => {
      if (this.isDraggingProgress) return;
      this.isEdit = true;
      this.tempEvent = args.event;
      // Fill popup form with event data
      this.loadPopupForm(args.event);
      // Set popup options
      this.popupHeaderText = 'Edit event';
      this.popupButtons = this.popupEditButtons;
      this.popupAnchor = args.domEvent.currentTarget;
      // Open the popup
      this.popup.open();
    },
    onEventCreated: (args) => {
      setTimeout(() => {
        this.isEdit = false;
        this.tempEvent = args.event;
        // Fill popup form with event data
        this.loadPopupForm(args.event);
        // Set popup options
        this.popupHeaderText = 'New Event';
        this.popupButtons = this.popupAddButtons;
        this.popupAnchor = args.target;
        // Open the popup
        this.popup.open();
      });
    },
  };

  popupHeaderText!: string;
  popupAnchor: HTMLElement | undefined;
  popupAddButtons: (MbscPopupButton | 'cancel')[] = [
    'cancel',
    {
      handler: () => {
        this.saveEvent();
      },
      keyCode: 'enter',
      text: 'Add',
      cssClass: 'mbsc-popup-button-primary',
    },
  ];
  popupEditButtons: (MbscPopupButton | 'cancel')[] = [
    'cancel',
    {
      handler: () => {
        this.saveEvent();
      },
      keyCode: 'enter',
      text: 'Save',
      cssClass: 'mbsc-popup-button-primary',
    },
  ];
  popupButtons: (MbscPopupButton | 'cancel')[] = [];
  popupOptions: MbscPopupOptions = {
    display: 'bottom',
    contentPadding: false,
    fullScreen: true,
    onClose: () => {
      if (!this.isEdit) {
        // Refresh the list, if add popup was canceled, to remove the temporary event
        this.myEvents = [...this.myEvents];
      }
    },
    responsive: {
      medium: {
        display: 'anchored',
        width: 400,
        fullScreen: false,
        touchUi: false,
      },
    },
  };

  datePickerResponsive: Record<string, MbscDatepickerOptions> = {
    medium: {
      controls: ['calendar'],
      touchUi: false,
    },
  };
  datePickerOptions: MbscDatepickerOptions = {
    select: 'range',
    showRangeLabels: false,
    touchUi: true,
  };

  isEdit = false;

  tempEvent!: MbscCalendarEvent;

  handleProgressArrowMouseDown(e: MouseEvent, event: MbscCalendarEvent) {
    e.stopPropagation();

    this.isDraggingProgress = true;

    const progressArrow = e.target as HTMLElement;
    const progressBar = progressArrow.closest('.mds-progress-bar') as HTMLElement;
    const eventContainerWidth = progressBar.parentElement!.offsetWidth;
    const initialMouseX = e.pageX;
    const initialProgress = +progressBar.style.width.replace('%', '');

    let newProgress: number;

    const handleMouseMove = (e: MouseEvent) => {
      const mouseXOffset = e.pageX - initialMouseX;

      newProgress = Math.round(initialProgress + (mouseXOffset / eventContainerWidth) * 100);
      newProgress = Math.max(0, Math.min(100, newProgress));

      event['progress'] = newProgress;
    };

    const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);

      setTimeout(() => (this.isDraggingProgress = false), 100);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  }

  loadPopupForm(event: MbscCalendarEvent) {
    this.popupEventTitle = event.title;
    this.popupEventDates = [event.start, event.end];
    this.popupEventResource = event['resource'] as string;
    this.popupEventProgress = event['progress'] || 0;
  }

  saveEvent() {
    this.tempEvent.title = this.popupEventTitle;
    this.tempEvent.start = this.popupEventDates[0];
    this.tempEvent.end = this.popupEventDates[1];
    this.tempEvent.resource = this.popupEventResource;
    this.tempEvent['progress'] = +this.popupEventProgress;

    if (this.isEdit) {
      // Update the event in the list
      this.myEvents = [...this.myEvents];
    } else {
      // Add the new event to the list
      this.myEvents = [...this.myEvents, this.tempEvent];
    }
    // Close the popup
    this.popup.close();
  }
}

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.