---
title: "Angular Timeline Date Formats Example | Mobiscroll"
component: "Timeline"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/timeline/date-object-ISO-8601-moment"
---

# Date Formats - Angular Timeline demo

Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the Angular Timeline.

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

## Description

Understanding how to work with dates inside the timeline is essential. You can pass to the `data`, `marked`, `colors` and `labels` in four different formats. The timeline can work with **Javascript date objects, ISO strings** and **Moment.js objects**.

## What this demo shows

- A desktop daily timeline where hours are arranged horizontally and resources arranged vertically on the left.
- **Example panel** Three code snippets are displayed to the left of the timeline, each showing a supported event date format.
- **Supported formats** The examples cover `JS date object`, `ISO date string` and `Moment.js object`.
- **Add event actions** Each code example has a button that adds a new event to the timeline using that format.
- **Button labels**: The buttons are labeled `Add event with JS date object`, `Add event with ISO string` and `Add event with moment.js object`.
- **Button interaction** Hovering a button highlights it, and clicking it inserts a new event into the timeline view.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected days, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 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.
- **Date positioning** Events are positioned by their assigned resource and exact date 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

- **Supported date inputs** Explaining which date formats the timeline accepts for event-related data.

## Tutorial

### JS date object

```ts
start: new Date(2020, 4, 19, 11, 15),
end: new Date(2020, 4, 19, 13, 45)
```

### ISO date string

```ts
start: '2020-05-20T15:30:00',
end: '2020-05-20T18:00:00'
```

### Moment.js object

```ts
start: moment([2020, 4, 21, 12]),
end: moment([2020, 4, 21, 15])
```

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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular';
import moment from 'moment';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myView: MbscEventcalendarView = { timeline: { type: 'day' } };

  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',
    },
  ];

  selectedDateObj = new Date(2020, 4, 19);
  selectedDateISO = '2020-05-20';
  selectedDateMoment: moment.Moment = moment([2020, 4, 21]);

  dateObjEvents: MbscCalendarEvent[] = [
    {
      start: new Date(2020, 4, 19, 7),
      end: new Date(2020, 4, 19, 8),
      title: 'General orientation',
      resource: 2,
    },
  ];

  dateISOEvents: MbscCalendarEvent[] = [
    {
      start: '2020-05-20T07:00:00',
      end: '2020-05-20T08:00:00',
      title: 'Clever Conference',
      resource: 2,
    },
  ];

  dateMomentEvents: MbscCalendarEvent[] = [
    {
      start: moment([2020, 4, 21, 7]),
      end: moment([2020, 4, 21, 8]),
      title: 'Product team mtg.',
      resource: 2,
    },
  ];

  addDateObjEvent(): void {
    const newEvent: MbscCalendarEvent = {
      start: new Date(2020, 4, 19, 10, 45),
      end: new Date(2020, 4, 19, 11, 45),
      title: 'New event',
      resource: 4,
    };
    this.dateObjEvents = [...this.dateObjEvents, newEvent];
    this.selectedDateObj = new Date(2020, 4, 19);
  }

  addDateISOEvent(): void {
    const newEvent: MbscCalendarEvent = {
      start: '2020-05-20T12:30:00',
      end: '2020-05-20T13:00:00',
      title: 'New event',
      resource: 1,
    };
    this.dateISOEvents = [...this.dateISOEvents, newEvent];
    this.selectedDateISO = '2020-05-20';
  }

  addDateMomentEvent(): void {
    const newEvent: MbscCalendarEvent = {
      start: moment([2020, 4, 21, 11]),
      end: moment([2020, 4, 21, 14]),
      title: 'New event',
      resource: 5,
    };
    this.dateMomentEvents = [...this.dateMomentEvents, newEvent];
    this.selectedDateMoment = moment([2020, 4, 21]);
  }
}
```

### Template

```html
<mbsc-page>
  <div class="mbsc-grid">
    <div class="mbsc-row">
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">Date object</div>
          <div class="mbsc-button-group-block">
            <mbsc-button (click)="addDateObjEvent()">
              start: new Date(2020, 4, 19, 10, 45) <br />
              end: new Date(2020, 4, 19, 11, 45)
            </mbsc-button>
          </div>
          <mbsc-eventcalendar
            [data]="dateObjEvents"
            [view]="myView"
            [resources]="myResources"
            [selectedDate]="selectedDateObj"
          ></mbsc-eventcalendar>
        </div>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">ISO 8601 date string</div>
          <div class="mbsc-button-group-block">
            <mbsc-button (click)="addDateISOEvent()">
              start: '2020-05-20T12:30:00' <br />
              end: '2020-05-20T13:00:00'
            </mbsc-button>
          </div>
          <mbsc-eventcalendar
            [data]="dateISOEvents"
            [view]="myView"
            [resources]="myResources"
            [selectedDate]="selectedDateISO"
          ></mbsc-eventcalendar>
        </div>
      </div>
      <div class="mbsc-col-sm-12 mbsc-col-md-4">
        <div class="mbsc-form-group">
          <div class="mbsc-form-group-title">Moment.js object</div>
          <div class="mbsc-button-group-block">
            <mbsc-button (click)="addDateMomentEvent()">
              start: moment([2020, 4, 21, 11]) <br />
              end: moment([2020, 4, 21, 14])
            </mbsc-button>
          </div>
          <mbsc-eventcalendar
            [data]="dateMomentEvents"
            [view]="myView"
            [resources]="myResources"
            [selectedDate]="selectedDateMoment"
          ></mbsc-eventcalendar>
        </div>
      </div>
    </div>
  </div>
</mbsc-page>
```

## Implementation notes

- Render three separate `Eventcalendar` instances, each with its own set of resources and events, to compare the three accepted date formats side by side.
- Use `timeline: { type: 'day' }` for all three calendars.
- Define the same 5 resources for all three calendars - Resource A (yellow `#fdf500`), Resource B (red `#ff0101`), Resource C (blue `#01adff`), Resource D (green `#239a21`), Resource E (orange `#ff4600`).
- **JavaScript `Date` object**: pre-load one event "General orientation" from `new Date(2020, 4, 19, 7)` to `new Date(2020, 4, 19, 8)` on resource B, and navigate to `new Date(2020, 4, 19)` on init. A second event (10:45-11:45 on resource D) can be added programmatically using the same `new Date(...)` format, followed by navigating to the same date.
- **ISO 8601 string**: pre-load one event "Clever Conference" from `'2020-05-20T07:00:00'` to `'2020-05-20T08:00:00'` on resource B, and navigate to `'2020-05-20'` on init. A second event (`'2020-05-20T12:30:00'`-`'2020-05-20T13:00:00'` on resource A) can be added using the same ISO string format, followed by navigating to the same ISO string.
- **Moment.js object**: import `moment` and pre-load one event "Product team mtg." from `moment([2020, 4, 21, 7])` to `moment([2020, 4, 21, 8])` on resource B, and navigate to `moment([2020, 4, 21])` on init. A second event (`moment([2020, 4, 21, 11])`-`moment([2020, 4, 21, 14])` on resource E) can be added using the same Moment object format, followed by navigating to the same date.
- **Navigation**: bind `selectedDate` to a state variable using the same date format as that calendar's data; for the imperative API, call `calInstance.navigate(date)` directly with the matching format.
- The key insight: `start`, `end`, `selectedDate`, and `.navigate()` all accept any of the three formats interchangeably - each calendar in this demo uses a consistent single format throughout to illustrate that each format works end-to-end.

## 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: [Linked Events & Dependencies](https://demo.mobiscroll.com/angular/timeline/connecting-linking-events-arrows.md) - Link Angular Timeline events with arrows to visualize task dependencies — set finish-to-start, start-to-finish, start-to-start, and finish-to-finish connections.
- Next: [Recurring Events](https://demo.mobiscroll.com/angular/timeline/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events on the Angular Timeline — set recurrence rules, exclude dates with the interactive configurator.