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

# Date Format Inputs - jQuery Event calendar demo

Pass JavaScript Date objects, ISO strings, or Moment.js dates to a JQuery event calendar — see all three supported input formats for event data. For jQuery or jQuery Mobile.

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

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

## Code

### JS

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

$(function () {
  var dateObj = $('#demo-date-type-obj')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        calendar: {
          type: 'month',
          popover: true,
          count: true,
        },
      },
      data: [
        {
          start: new Date(2020, 4, 19, 7),
          end: new Date(2020, 4, 19, 8),
          title: 'General orientation',
          color: '#35bb5a',
        },
      ],
    })
    .mobiscroll('getInst');

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

  var dateISO = $('#demo-date-type-iso')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        calendar: {
          type: 'month',
          popover: true,
          count: true,
        },
      },
      data: [
        {
          start: '2020-05-20T07:00:00',
          end: '2020-05-20T08:00:00',
          title: 'Clever Conference',
          color: '#a71111',
        },
      ],
    })
    .mobiscroll('getInst');

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

  var dateMoment = $('#demo-date-type-moment')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        calendar: {
          type: 'month',
          popover: true,
          count: true,
        },
      },
      data: [
        {
          start: moment([2020, 4, 21, 7]),
          end: moment([2020, 4, 21, 8]),
          title: 'Product team mtg.',
          color: '#913aa7',
        },
      ],
    })
    .mobiscroll('getInst');

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

  $('#demo-add-date-obj').on('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));
  });

  $('#demo-add-iso').on('click', function () {
    dateISO.addEvent({
      start: '2020-05-20T12:30:00',
      end: '2020-05-20T13:00:00',
      text: 'New Event',
    });
    dateISO.navigate('2020-05-20');
  });

  $('#demo-add-moment').on('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]));
  });
});
```

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

- 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-jquery.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 jquery
   ```

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 jquery --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation

## Related demos

- Previous: [Event Data Structure](https://demo.mobiscroll.com/jquery/eventcalendar/event-data-structure.md) - Define event objects in a JQuery event calendar — set title, start, end, color, recurring rules, per-event drag and resize, and custom fields.
- Next: [Recurring Events](https://demo.mobiscroll.com/jquery/eventcalendar/recurring-events.md) - Set up daily, weekly, monthly, and yearly recurring events in a JQuery event calendar — configure repeat patterns, stop conditions, and date exclusions.