---
title: "Angular Event calendar Date Format Inputs Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/eventcalendar/date-object-ISO-8601-moment"
---

# Date Format Inputs - Angular Event calendar demo

Pass JavaScript Date objects, ISO strings, or Moment.js dates to an Angular event calendar — see all three supported input formats for event data.

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

## Description

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

## What this demo shows

- A desktop month-view event calendar is shown with an empty month grid 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 calendar, 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 calendar 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.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** The calendar supports swipe or drag navigation between months by clicking and dragging the calendar left or right.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button between them on the right.

## Best for

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

## Tutorial

### JS date object

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

### ISO date string

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

### Moment.js object

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

## 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
- [`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, 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 = {
    calendar: {
      type: 'month',
      popover: true,
      count: true,
    },
  };

  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',
      color: '#35bb5a',
    },
  ];

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

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

  addDateObjEvent(): void {
    const newEvent: MbscCalendarEvent = {
      start: new Date(2020, 4, 19, 10, 45),
      end: new Date(2020, 4, 19, 11, 45),
      title: 'New event',
      color: '#35bb5a',
    };
    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',
      color: '#a71111',
    };
    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',
      color: '#913aa7',
    };
    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" [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" [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" [selectedDate]="selectedDateMoment"></mbsc-eventcalendar>
        </div>
      </div>
    </div>
  </div>
</mbsc-page>
```

## Implementation notes

- Set `view: { calendar: { type: 'month', popover: true, count: true } }`. `count: true` collapses overflow events into a count badge; `popover: true` opens a popover when that badge is clicked. Render three separate `Eventcalendar` instances side by side, one for each supported date format.
- The three formats Mobiscroll accepts for `start`, `end`, and any date-valued field (including `marked`, `colors`, and `labels`) are: a JavaScript `Date` object (e.g. `new Date(2020, 4, 19, 7)`), an ISO 8601 string (e.g. `'2020-05-20T07:00:00'`), and a Moment.js object (e.g. `moment([2020, 4, 21, 7])`). Initialize each calendar's `data` with one event using the format that calendar demonstrates.
- Set `selectedDate` on each calendar to the initial event's date (in the same format) so the calendar opens on the correct month. To add an event programmatically: append a new event in the same format and update `selectedDate` to navigate to it, or (imperative API) call `calendar.addEvent(newEvent)` then `calendar.navigate(date)`.

## 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: [Event Data Structure](https://demo.mobiscroll.com/angular/eventcalendar/event-data-structure.md) - Define event objects in an Angular event calendar — set title, start, end, color, recurring rules, per-event drag and resize, and custom fields.
- Next: [Recurring Events](https://demo.mobiscroll.com/angular/eventcalendar/recurring-events.md) - Set up daily, weekly, monthly, and yearly recurring events in an Angular event calendar — configure repeat patterns, stop conditions, and date exclusions.