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

# Task Checklist in Events - JavaScript Timeline demo

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

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/check-list-tasks-within-events)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/check-list-tasks-within-events)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/check-list-tasks-within-events.md), [Angular](https://demo.mobiscroll.com/angular/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/javascript/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 rendering](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderTimelineEventContent) 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/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`extendDefaultEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-extendDefaultEvent) - option
- [`renderResource`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderResource) - renderer
- [`renderTimelineEventContent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderTimelineEventContent) - renderer
- [`onEventClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventClick) - event
- [`updateEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-updateEvent) - method
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var inst = mobiscroll.eventcalendar('#demo-tasks-calendar', {
  view: {
    timeline: {
      type: 'week',
      eventHeight: 'variable',
      eventDisplay: 'fill',
    },
  },
  dragToCreate: true,
  clickToCreate: true,
  dragToMove: true,
  dragToResize: true,
  extendDefaultEvent: function () {
    return {
      title: 'New Event',
      tasks: ['Default task'],
    };
  },
  renderResource: function (resource) {
    return (
      '<div class="mds-tasks-resource-name">' +
      resource.name +
      '</div>' +
      '<div class="mds-tasks-resource-description">' +
      resource.description +
      '</div>'
    );
  },
  renderTimelineEventContent: function (event) {
    return (
      '<div class="mds-tasks-event-title">' +
      event.title +
      '</div>' +
      '<div class="mds-tasks-event-subtitle">Task list</div>' +
      '<div class="mds-tasks-event-list">' +
      event.original.tasks.reduce(function (list, task) {
        return list + '<div class="mds-tasks-event-list-item">' + task + '</div>';
      }, '') +
      '<div class="mds-tasks-event-list-item mds-tasks-event-add">+ Add task</div>' +
      '</div>'
    );
  },
  onEventClick: function (args) {
    if (args.domEvent.target.classList.contains('mds-tasks-event-add')) {
      var ev = args.event;
      mobiscroll.prompt({
        title: 'Add new task to ' + ev.title,
        callback: function (value) {
          if (value) {
            var updatedTasks = ev.tasks.slice();
            updatedTasks.push(value);
            ev.tasks = updatedTasks;
            inst.updateEvent(ev);
            mobiscroll.toast({
              duration: 3000,
              message: 'Tasks updated for ' + ev.title,
            });
          }
        },
      });
    }
  },
  resources: [
    {
      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',
    },
  ],
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events-check-list-tasks/',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
   <div id="demo-tasks-calendar" class="mds-tasks-calendar"></div>
```

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

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

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

## Related demos

- Previous: [Work Order Assignment](https://demo.mobiscroll.com/javascript/timeline/assign-unassign-work-orders-fixed-top-row.md) - Assign work orders to employees on a Javascript 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/javascript/timeline/flight-scheduling-two-synchronized-timelines.md) - Use synchronized Javascript Timeline views to build a flight scheduling UI — drag flights to assign them to aircraft, with fixed event times and conflict detection.