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

# Supported Date Formats - JavaScript Agenda demo

Use JS Date objects, ISO 8601 strings, or Moment.js values in the Javascript Agenda — pass them to event data, markers, colors, and labels. Plain JavaScript API.

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

## Description

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

## What this demo shows

- Shows a monthly agenda view with an empty agenda list by default, so no events appear until one is added from the examples.
- **Example panel** Three code snippets are displayed to the left of the agenda, 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 agenda 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 month view.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

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

## Tutorial

### JS date object

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

### ISO date string

```js
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00'
```

### Moment.js object

```js
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14])
```

## 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
- [`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 dateObj = mobiscroll.eventcalendar('#demo-date-type-obj', {
  view: {
    agenda: { type: 'month' },
  },
  data: [
    {
      start: new Date(2020, 4, 19, 7),
      end: new Date(2020, 4, 19, 8),
      title: 'General orientation',
      color: '#35bb5a',
    },
  ],
});

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

var dateISO = mobiscroll.eventcalendar('#demo-date-type-iso', {
  view: {
    agenda: { type: 'month' },
  },
  data: [
    {
      start: '2020-05-20T07:00:00',
      end: '2020-05-20T08:00:00',
      title: 'Clever Conference',
      color: '#a71111',
    },
  ],
});

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

var dateMoment = mobiscroll.eventcalendar('#demo-date-type-moment', {
  view: {
    agenda: { type: 'month' },
  },
  data: [
    {
      start: moment([2020, 4, 21, 7]),
      end: moment([2020, 4, 21, 8]),
      title: 'Product team mtg.',
      color: '#913aa7',
    },
  ],
});

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

- Use `view: { agenda: { type: 'month' } }`. Render three Eventcalendar instances side by side in a `Page` + grid layout, each demonstrating a different date format: JavaScript `Date` object (e.g. `new Date(2020, 4, 19, 7)`), ISO 8601 string (e.g. `'2020-05-20T07:00:00'`), and Moment.js object (e.g. `moment([2020, 4, 21, 7])`). Each instance is pre-seeded with one event using its respective format and navigated to its date on init.
- Adding an event programmatically: call `addEvent(event)` (or update the `data` array) with the event in the target date format, then navigate to it via `navigate(date)` (or update `selectedDate`).

## 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: [Event Data Structure](https://demo.mobiscroll.com/javascript/agenda/event-data-structure.md) - Structure event objects for the Javascript Agenda — configure start, end, recurrence, resource, and color properties, and extend events with custom fields.
- Next: [Recurring Events](https://demo.mobiscroll.com/javascript/agenda/recurring-events.md) - Configure daily, weekly, monthly, and yearly recurring events in a Javascript agenda view — exclude dates, set stop conditions, and build RRULE strings interactively.