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

# Date Format Inputs - Vue Event calendar demo

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

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/date-object-ISO-8601-moment)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/date-object-ISO-8601-moment)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/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), [jQuery](https://demo.mobiscroll.com/jquery/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)

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

## Code

### SFC JS

```vue
<script setup>
import {
  MbscButton,
  MbscEventcalendar,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import moment from 'moment'
import { ref } from 'vue'

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

const myView = {
  calendar: {
    type: 'month',
    popover: true,
    count: true
  }
}

const dateObjData = ref([
  {
    start: new Date(2020, 4, 19, 7),
    end: new Date(2020, 4, 19, 8),
    title: 'General orientation',
    color: '#35bb5a'
  }
])

const selectedObj = ref(new Date(2020, 4, 19))

const isoData = ref([
  {
    start: '2020-05-20T07:00:00',
    end: '2020-05-20T08:00:00',
    title: 'Clever Conference',
    color: '#a71111'
  }
])

const selectedISO = ref('2020-05-20')

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

const selectedMoment = ref(moment([2020, 4, 21]))

function addDate() {
  const newEvent = {
    start: new Date(2020, 4, 19, 10, 45),
    end: new Date(2020, 4, 19, 11, 45),
    text: 'New Event'
  }
  dateObjData.value = [...dateObjData.value, newEvent]
  selectedObj.value = new Date(2020, 4, 19)
}

function addISO() {
  const newEvent = {
    start: '2020-05-20T12:30:00',
    end: '2020-05-20T13:00:00',
    text: 'New Event'
  }
  isoData.value = [...isoData.value, newEvent]
  selectedISO.value = '2020-05-20'
}

function addMoment() {
  const newEvent = {
    start: moment([2020, 4, 21, 11]),
    end: moment([2020, 4, 21, 14]),
    text: 'New Event'
  }
  momentData.value = [...momentData.value, newEvent]
  selectedMoment.value = moment([2020, 4, 21])
}
</script>

<template>
  <MbscPage>
    <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">
              <MbscButton @click="addDate">
                start: new Date(2020, 4, 19, 10, 45) <br />
                end: new Date(2020, 4, 19, 11, 45)
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="dateObjData" :view="myView" :selectedDate="selectedObj" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">ISO string</div>
            <div class="mbsc-button-group-block">
              <MbscButton @click="addISO">
                start: 2020-05-20T12:30:00 <br />
                end: 2020-05-20T13:00:00
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="isoData" :view="myView" :selectedDate="selectedISO" />
          </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</div>
            <div class="mbsc-button-group-block">
              <MbscButton @click="addMoment">
                start: moment([2020, 4, 21, 11]) <br />
                end: moment([2020, 4, 21, 14])
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="momentData" :view="myView" :selectedDate="selectedMoment" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  MbscButton,
  MbscEventcalendar,
  MbscPage,
  setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscDateType, MbscEventcalendarView } from '@mobiscroll/vue'
import moment from 'moment'
import { ref } from 'vue'

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

const selectedDateObj = ref<MbscDateType>(new Date(2020, 4, 19))
const selectedDateISO = ref<MbscDateType>('2020-05-20')
const selectedDateMoment = ref<MbscDateType>(moment([2020, 4, 21]))

const dateObjEvents = ref<MbscCalendarEvent[]>([
  {
    start: new Date(2020, 4, 19, 7),
    end: new Date(2020, 4, 19, 8),
    title: 'General orientation',
    color: '#35bb5a'
  }
])

const dateISOEvents = ref<MbscCalendarEvent[]>([
  {
    start: '2020-05-20T07:00:00',
    end: '2020-05-20T08:00:00',
    title: 'Clever Conference',
    color: '#a71111'
  }
])

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

const myView: MbscEventcalendarView = {
  calendar: {
    type: 'month',
    popover: true,
    count: true
  }
}

function addDateObjEvent() {
  const newEvent = {
    start: new Date(2020, 4, 19, 10, 45),
    end: new Date(2020, 4, 19, 11, 45),
    text: 'New Event'
  }
  dateObjEvents.value = [...dateObjEvents.value, newEvent]
  selectedDateObj.value = new Date(2020, 4, 19)
}

function addDateISOEvent() {
  const newEvent = {
    start: '2020-05-20T12:30:00',
    end: '2020-05-20T13:00:00',
    text: 'New Event'
  }
  dateISOEvents.value = [...dateISOEvents.value, newEvent]
  selectedDateISO.value = '2020-05-20'
}

function addDateMomentEvent() {
  const newEvent = {
    start: moment([2020, 4, 21, 11]),
    end: moment([2020, 4, 21, 14]),
    text: 'New Event'
  }
  dateMomentEvents.value = [...dateMomentEvents.value, newEvent]
  selectedDateMoment.value = moment([2020, 4, 21])
}
</script>

<template>
  <MbscPage>
    <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">
              <MbscButton @click="addDate">
                start: new Date(2020, 4, 19, 10, 45) <br />
                end: new Date(2020, 4, 19, 11, 45)
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="dateObjData" :view="myView" :selectedDate="selectedObj" />
          </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
          <div class="mbsc-form-group">
            <div class="mbsc-form-group-title">ISO string</div>
            <div class="mbsc-button-group-block">
              <MbscButton @click="addISO">
                start: 2020-05-20T12:30:00 <br />
                end: 2020-05-20T13:00:00
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="isoData" :view="myView" :selectedDate="selectedISO" />
          </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</div>
            <div class="mbsc-button-group-block">
              <MbscButton @click="addMoment">
                start: moment([2020, 4, 21, 11]) <br />
                end: moment([2020, 4, 21, 14])
              </MbscButton>
            </div>
            <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :data="momentData" :view="myView" :selectedDate="selectedMoment" />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## 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-vue.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 vue
   ```

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

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

## Related demos

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