---
title: "Angular Timeline Event Data Structure Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/timeline/event-data-structure"
---

# Event Data Structure - Angular Timeline demo

Define event properties for a Angular Timeline — titles, dates, colors, resource and slot assignments, recurrence, buffer times, and per-event drag/resize control. For Angular 22 and Ionic 8.

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

## Description

The event data structure for the timeline is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

- `id` - A unique ID for the event. If not specified a unique id will be generated
- `title` - Defines the event text. This can be plaintext or HTML
- `tooltip` - Defines the text for the tooltip which appears on mouse hover. If not specified, it will show the title and the start/end times of the event.
- `color` - Defines the event color
- `start` - Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. [Learn about date formats](https://demo.mobiscroll.com/angular/timeline/date-object-ISO-8601-moment)
- `end` - Sets the end date and time for the event. The same formats are supported as for `start`
- `allDay` - Configures the event as a full-day event
- `recurring` - Configures the recurring rules for the event. [Learn about recurring events](https://demo.mobiscroll.com/angular/timeline/recurring-events)
- `recurringException` - Represents the exceptions of a recurring event, when specific dates need to be skipped from the rule.
- `recurringExceptionRule` - Represents the exception rule of a recurring event, when recurring dates need to be skipped from the rule.
- `resource` - Links the event to one or more resources. Expects a list of IDs from the [`resources` array](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources)
- `slot` - Links the event to a slot. Expects an ID from the [`slots` array](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-slots)
- `timezone` - The timezone where the event takes place. If specified, it takes precedence over the calendar's specified [`dataTimezone`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dataTimezone).
- `dragBetweenResources` - Specifies whether the event is movable across resources. If set to `false` has precedence over `eventDragBetweenResources` property in [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) and the [`dragBetweenResources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragBetweenResources) option of the calendar.
- `dragInTime` - Specifies whether the event is movable in time. If set to `false` has precedence over `eventDragInTime` property in [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) and the [`dragInTime`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragInTime) option of the calendar.
- `resize` - Specifies whether the event is resizable. If set to `false` has precedence over `eventResize` property in [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) and the [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) option of the calendar.
- `overlap` - Specifies whether overlap is allowed on the event. If set to `false` has precedence over `eventOverlap` property in [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) and the [`eventOverlap`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventOverlap) option of the calendar.
- `editable` - Denotes if the event is editable. If set `false`, the event cannot be dragged, resized or deleted even if globally enabled
- `cssClass` - A custom css class for the event. Useful for quick styling adjustments of the event container.
- `bufferBefore` - Defines a buffer time in minutes that will be rendered before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in before a flight.
- `bufferAfter` - Defines a buffer time in minutes that will be rendered after the end of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time after meetings/appointments, check out after flights, inspection, cleaning after certain tasks.
- `order` - Specifies the order of the event in the event array. Has precedence over the default ordering rules.

## What this demo shows

- A desktop resource timeline with hours arranged horizontally and resources listed as rows on the left.
- **Code example** The left-side code snippet shows an event definition with the event properties used by the timeline.
- **Add event action** A button below the code snippet lets users add a new event to the timeline from the event data shown in the code example.
- **Add event feedback** Hovering the button highlights it, and clicking it adds the event to the timeline and shows a confirmation toast at the bottom center of the timeline.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between weeks and the Today button returns to the current date.
- **Day view** The day strip shows the selected day, with the current date highlighted. The timeline displays hourly columns from 9 AM to 5 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events appear as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed below the title. Also shows buffer times before and after the event.
- **Date positioning** Events are positioned by their assigned resource and exact date and time range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Daily team scheduling** Managing meetings, check-ins, and work blocks in a day-based timeline with quick access to nearby dates.
- **Workforce and shift planning** Viewing all-day and timed items together when teams need to coordinate daily schedules across a structured timeline.
- **Event-dense planning interfaces** Helping users spot categories, overlaps, and gaps quickly through color-coded event blocks.

## Tutorial

```ts
{
    // base properties
    title: 'Product planning',
    start: '2026-10-21T15:00',
    end: '2026-10-21T17:00',
    resource: 4,
    bufferBefore: 20,
    bufferAfter: 30,
    // add any property you'd like
    busy: true,
    description: 'Weekly meeting with team',
    location: 'Office',
}
```

Now that you know how the event object is structured you can [easily load an array of events](https://demo.mobiscroll.com/angular/timeline/load-events-on-demand) into the timeline and [perform CRUD operations](https://demo.mobiscroll.com/angular/timeline/add-delete-event).

## 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
- [`navigateToEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#method-navigateToEvent) - method
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendar,
  MbscEventcalendarView,
  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 {
  constructor(private notify: Notifications) {}

  @ViewChild('calendar', { static: false })
  calendar!: MbscEventcalendar;

  myEvents: MbscCalendarEvent[] = [
    {
      start: '2026-10-21T11:00',
      end: '2026-10-21T13:00',
      title: 'General orientation',
      resource: 2,
      bufferBefore: 20,
      bufferAfter: 30,
    },
  ];

  myResources: MbscResource[] = [
    { id: 1, name: 'Resource A', color: '#fdf500' },
    { id: 2, name: 'Resource B', color: '#ff0101' },
    { id: 3, name: 'Resource C', color: '#01adff' },
    { id: 4, name: 'Resource D', color: '#239a21' },
    { id: 5, name: 'Resource E', color: '#ff4600' },
  ];

  myView: MbscEventcalendarView = { timeline: { type: 'day' } };

  addEvent(): void {
    const newEvent: MbscCalendarEvent = {
      // Base properties
      title: 'Product planning',
      start: '2026-10-21T15:00',
      end: '2026-10-21T17:00',
      resource: 4,
      bufferBefore: 20,
      bufferAfter: 30,
      // Add any property you'd like
      busy: true,
      description: 'Weekly meeting with team',
      location: 'Office',
    };

    this.myEvents = [...this.myEvents, newEvent];
    this.calendar.navigateToEvent(newEvent);

    this.notify.toast({
      message: 'Event added',
    });
  }
}
```

### Template

```html
<mbsc-page class="mds-full-height">
  <div class="mds-full-height mbsc-flex-col">
    <div class="mbsc-flex-none">
      <mbsc-button (click)="addEvent()" startIcon="plus">Add event to calendar</mbsc-button>
    </div>
    <div class="mds-overflow-hidden mbsc-flex-1-1">
      <mbsc-eventcalendar #calendar [data]="myEvents" [resources]="myResources" [view]="myView"></mbsc-eventcalendar>
    </div>
  </div>
</mbsc-page>
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
```

## Implementation notes

- Use `timeline: { type: 'day' }` - a single-day view.
- Define 5 resources (A-E) with distinct colors: yellow `#fdf500`, red `#ff0101`, blue `#01adff`, green `#239a21`, orange `#ff4600`.
- Start with one pre-loaded event on Resource B demonstrating `bufferBefore: 20` and `bufferAfter: 30`. The buffer zones render as shaded areas before the event start and after the event end, visualising preparation/wrap-up time in minutes.
- A second event can be added programmatically on Resource D combining base event properties with custom fields (`bufferBefore`, `bufferAfter`, `busy`, `description`, `location`). React/Angular/Vue: append `newEvent` to the array bound to `data` to add it. JS/jQuery: use `calendar.addEvent(newEvent)` (imperative API) to add it. Then call `calInst.navigateToEvent(newEvent)` to scroll the calendar to the newly added event.

## 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

- Next: [Linked Events & Dependencies](https://demo.mobiscroll.com/angular/timeline/connecting-linking-events-arrows.md) - Link Angular Timeline events with arrows for task dependencies — configure finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections.