---
title: "Angular Timeline Task Checklist in Events Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/timeline/check-list-tasks-within-events"
---

# Task Checklist in Events - Angular Timeline demo

Render a task checklist inside each Angular Timeline event card — row heights expand as the list grows, and a popup let users add new subtasks.

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

## Description

When there are subtasks related to work orders, it may be necessary to display them in the context of work order (or event). Subtasks can be rendered as a list with the possibility of adding new items using the [`Prompt`](https://demo.mobiscroll.com/angular/forms/alert-confirm-prompt) or more sophisticated modals even. The height of resources will dynamically increase depending on the height of the events/length of lists.

To allow dynamic changes in heights according to the length of subtask lists, `eventHeight: 'variable'` is used, along with [custom event content templating](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineEventContentTemplate) to maintain the appropriate theme styles.

## What this demo shows

- A desktop weekly timeline where days are arranged horizontally and resources are listed vertically on the left.
- **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 strip below the header shows the selected week from Sunday to Saturday, using the `DD DDD MMM YYYY` date format, with the current date highlighted.
- **Resources** The left side shows six resources, each with a custom description displayed beneath the resource name.
- **Resource rows** Resource row height increases dynamically based on the height of the events and the length of their task lists.
- **Resource colors** Assigned projects use a consistent color per resource, so events for the same team share the same color.
- **Event cards** Events are rendered as large colored cards with the project name in bold, a task list below it, and a "+ Add task" action at the bottom.
- **Task entry** Clicking "+ Add task" opens a popup with an input field for the new task, plus Cancel and Ok buttons for dismissing or confirming the change.
- **Dynamic event height** Event card height updates as tasks are added to the card.
- **Event positioning** Events are positioned by assigned resource and by start and end date.
- **Event creation** New events can be created by double-clicking an individual resource row in the timeline or by clicking and dragging across a time range.
- **Event interaction** Events are highlighted on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Vertical scrolling** The resource area scrolls vertically so more resources can be displayed in the same timeline.

## Best for

- **Construction project planning** Scheduling resource-based assignments where each project or work order includes its own editable task list.
- **Installation workflows** Planning team assignments across a week while keeping installation tasks visible inside each scheduled event.
- **Maintenance projects** Managing work orders that need subtasks, changing durations, and resource-specific scheduling.
- **Field operations** Coordinating crews, teams, or resources across time while keeping task details attached to each assignment.
- **Task-driven project management** Using timeline events as containers for checklists that can grow as new tasks are added.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`dragToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToCreate) - option
- [`clickToCreate`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-clickToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`extendDefaultEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-extendDefaultEvent) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`timelineEventContentTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-timelineEventContentTemplate) - template
- [`resourceTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-resourceTemplate) - template

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscCalendarEventData,
  MbscEventcalendarOptions,
  MbscModule,
  MbscResource,
  Notifications,
  setOptions,
} from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  providers: [Notifications],
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
  constructor(
    private http: HttpClient,
    private notify: Notifications,
  ) {}

  calendarOptions: MbscEventcalendarOptions = {
    dragToCreate: true,
    clickToCreate: true,
    dragToMove: true,
    dragToResize: true,
    view: {
      timeline: {
        type: 'week',
        eventHeight: 'variable',
        eventDisplay: 'fill',
      },
    },
    extendDefaultEvent: () => ({
      title: 'New Event',
      tasks: ['Default task'],
    }),
  };

  myEvents: MbscCalendarEvent[] = [];

  myResources: MbscResource[] = [
    {
      id: 1,
      name: 'Site Plumbing Squad',
      description: 'Elite construction plumbers ensuring flawless pipeline installations on every site.',
      color: '#01adff',
    },
    {
      id: 2,
      name: 'Pipeline Builders',
      description: 'Constructing fluid pathways, one precision connection at a time.',
      color: '#239a21',
    },
    {
      id: 3,
      name: 'Blueprint Plumbers',
      description: 'Turning plans into precise pipelines with expert craftsmanship.',
      color: '#ff4600',
    },
    {
      id: 4,
      name: 'Site Supply Specialists',
      description: 'Delivering essential plumbing materials promptly to construction sites',
      color: '#4981d6',
    },
    {
      id: 5,
      name: 'Infrastructure Installers',
      description: ' Building the backbone of modern plumbing systems efficiently.',
      color: '#f1e920',
    },
    {
      id: 6,
      name: 'Steel Sinks Squad',
      description: 'Installing robust sinks for industrial and commercial settings.',
      color: '#f7961e',
    },
  ];

  addTask(event: MbscCalendarEventData): void {
    const ev: MbscCalendarEvent = event.original!;
    const index = this.myEvents.findIndex((e) => e.id === ev.id);
    this.notify.prompt({
      title: 'Add new task to ' + ev.title,
      callback: (value) => {
        if (value) {
          const newEventList = [...this.myEvents];
          ev['tasks'].push(value);
          newEventList.splice(index, 1, ev);
          this.myEvents = newEventList;
          this.notify.toast({
            duration: 3000,
            message: 'Tasks updated for ' + ev.title,
          });
        }
      },
    });
  }

  ngOnInit(): void {
    this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events-check-list-tasks/', 'callback').subscribe((resp) => {
      this.myEvents = resp;
    });
  }
}
```

### Template

```html
<mbsc-eventcalendar
  class="mds-tasks-calendar"
  [options]="calendarOptions"
  [data]="myEvents"
  [resources]="myResources"
  [timelineEventContentTemplate]="eventTemp"
  [resourceTemplate]="resourceTemp"
>
  <!-- (onEventClick)="handleEventClick($event)" -->
  <ng-template #eventTemp let-event>
    <div class="mds-tasks-event-title">{{event.title}}</div>
    <div class="mds-tasks-event-subtitle">Task list</div>
    <div class="mds-tasks-event-list">
      <div *ngFor="let task of event.original!.tasks;" class="mds-tasks-event-list-item">{{task}}</div>
      <div class="mds-tasks-event-list-item mds-tasks-event-add" (click)="addTask(event)">+ Add task</div>
    </div>
  </ng-template>
  <ng-template #resourceTemp let-resource>
    <div class="mds-tasks-resource-name">{{resource.name}}</div>
    <div class="mds-tasks-resource-description">{{resource.description}}</div>
  </ng-template>
</mbsc-eventcalendar>
```

### CSS

```css
.mds-tasks-resource-name {
  padding: 15px 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.mds-tasks-resource-description {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.mds-tasks-event-title {
  padding: 16px 8px 0 8px;
  white-space: normal;
  word-break: normal;
  line-height: 24px;
  font-size: 16px;
  font-weight: 700;
}

.mds-tasks-event-subtitle {
  font-weight: 600;
  font-size: 14px;
  padding: 8px 8px 0 8px;
}

.mds-tasks-event-list {
  margin: 8px 8px 16px;
  border-radius: 0.25em;
  background-color: #ffffff69;
}

.mds-tasks-event-list-item {
  padding: 8px;
  white-space: normal;
  font-size: 12px;
  line-height: 16px;
  color: #000;
  border-bottom: 1px solid #00000033;
  font-weight: 400;
}

.mds-tasks-event-add {
  padding-top: 4px;
  border-bottom: none;
  font-weight: 700;
}

.mds-tasks-event-add:hover {
  color: #0000ee;
  text-decoration: underline;
}

.mds-tasks-calendar .mbsc-timeline-row {
  height: 174px;
}

.mds-tasks-calendar .mbsc-schedule-event-inner {
  display: block;
  height: auto;
}
```

## Implementation notes

- Use `type: 'week'` with `eventDisplay: 'fill'` and `eventHeight: 'variable'` so event rows grow automatically as subtasks are added.
- Give each event a custom `tasks` array of strings representing the subtask list. Use `extendDefaultEvent` to pre-populate newly created events with a default title and a starter task.
- Use `renderTimelineEventContent` (Angular: `timelineEventContentTemplate`, Vue: `#timelineEventContent` slot) to render the event body: show the event title, a "Task list" label, the current tasks as list items, and a "+ Add task" clickable item at the bottom.
- When the "+ Add task" item is clicked inside `renderTimelineEventContent`, open a `Prompt` dialog with a title referencing the event name. Pass the event reference to state so the correct event is updated on confirm.
- In the `Prompt` `onClose` handler, if the user entered a value, push it onto the event's `tasks` array, replace the event in the events list, and update state. Show a `Toast` confirming the update.
- Use `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot) to display the resource name and a description line beneath it.
- Enable `clickToCreate`, `dragToCreate`, `dragToMove`, and `dragToResize` for full event management directly on the timeline.

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

- Previous: [Work Order Assignment](https://demo.mobiscroll.com/angular/timeline/assign-unassign-work-orders-fixed-top-row.md) - Assign work orders to employees on a Angular Timeline — keep unassigned orders in a fixed top row while scrolling, and drag to assign without changing time.
- Next: [Dual Synchronized Flight Scheduling](https://demo.mobiscroll.com/angular/timeline/flight-scheduling-two-synchronized-timelines.md) - Use synchronized Angular Timeline views to build a flight scheduling UI — drag flights to assign them to aircraft, with fixed event times and conflict detection.