---
title: "Javascript Timeline Date Input Formats Example | Mobiscroll"
component: "Timeline"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/timeline/date-object-ISO-8601-moment"
---

# Date Input Formats - JavaScript Timeline demo

Pass JavaScript date objects, ISO 8601 strings, or Moment.js dates to events, marked dates, colors, and labels in the Javascript Timeline. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/date-object-ISO-8601-moment)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/date-object-ISO-8601-moment)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/date-object-ISO-8601-moment.md), [Angular](https://demo.mobiscroll.com/angular/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

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

### ISO date string

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

### Moment.js object

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

## 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
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`navigate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigate) - method
- [`addEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-addEvent) - method

## Code

### JS

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

var myResources = [
  {
    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',
  },
];

var dateObj = mobiscroll.eventcalendar('#demo-date-type-obj', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    scheduler: { type: 'week' },
  },
  resources: myResources,
  data: [
    {
      start: new Date(2020, 4, 19, 7),
      end: new Date(2020, 4, 19, 8),
      title: 'General orientation',
      resource: 2,
    },
  ],
});

dateObj.navigate(new Date(2020, 4, 19));

var dateISO = mobiscroll.eventcalendar('#demo-date-type-iso', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    timeline: { type: 'day' },
  },
  resources: myResources,
  data: [
    {
      start: '2020-05-20T07:00:00',
      end: '2020-05-20T08:00:00',
      title: 'Clever Conference',
      resource: 2,
    },
  ],
});

dateISO.navigate('2020-05-20');

var dateMoment = mobiscroll.eventcalendar('#demo-date-type-moment', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    scheduler: { type: 'week' },
  },
  resources: myResources,
  data: [
    {
      start: moment([2020, 4, 21, 7]),
      end: moment([2020, 4, 21, 8]),
      title: 'Product team mtg.',
      resource: 2,
    },
  ],
});

dateMoment.navigate(moment([2020, 4, 21]));

document.getElementById('demo-add-date-obj').addEventListener(
  'click',
  function () {
    dateObj.addEvent({
      start: new Date(2020, 4, 19, 10, 45),
      end: new Date(2020, 4, 19, 11, 45),
      text: 'New Event',
      resource: 4,
    });
    dateObj.navigate(new Date(2020, 4, 19));
  },
  false,
);

document.getElementById('demo-add-iso').addEventListener(
  'click',
  function () {
    dateISO.addEvent({
      start: '2020-05-20T12:30:00',
      end: '2020-05-20T13:00:00',
      text: 'New Event',
      resource: 1,
    });
    dateISO.navigate('2020-05-20');
  },
  false,
);

document.getElementById('demo-add-moment').addEventListener(
  'click',
  function () {
    // Make sure that moment js is loaded
    dateMoment.addEvent({
      start: moment([2020, 4, 21, 11]),
      end: moment([2020, 4, 21, 14]),
      text: 'New Event',
      resource: 5,
    });
    dateMoment.navigate(moment([2020, 4, 21]));
  },
  false,
);
```

### HTML

```html
<div 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">
            <button mbsc-button id="demo-add-date-obj">
              start: new Date(2020, 4, 19, 10, 45)<br /> 
              end: new Date(2020, 4, 19, 11, 45)
            </button>
          </div>
          <div id="demo-date-type-obj"></div>
        </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">
            <button mbsc-button id="demo-add-iso">
              start: '2020-05-20T12:30:00'<br /> 
              end: '2020-05-20T13:00:00'
            </button>
          </div>
          <div id="demo-date-type-iso"></div>
        </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">
            <button mbsc-button id="demo-add-moment">
              start: moment([2020, 4, 21, 11])<br />
              end: moment([2020, 4, 21, 14])
            </button>
          </div>
          <div id="demo-date-type-moment"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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