---
title: "Vue Scheduler Date Input Formats Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/date-object-ISO-8601-moment"
---

# Date Input Formats - Vue Scheduler demo

Use JS date objects, ISO 8601 strings, or Moment.js objects as date input in the Vue Scheduler for events, colors, and labels. For Vue and Nuxt.

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

## Description

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

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Example panel** Three code snippets are displayed to the left of the scheduler, 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 scheduler 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 scheduler view.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

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

## Tutorial

### JS date object

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

### ISO date string

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

### Moment.js object

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

## 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
- [`selected-date-change`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onSelectedDateChange) - event

## 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 selectedDateObj = ref(new Date(2020, 4, 19))
const selectedDateISO = ref('2020-05-20')
const selectedDateMoment = ref(moment([2020, 4, 21]))

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

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

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

const myView = {
  scheduler: {
    type: 'week'
  }
}

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="addDateObjEvent">
                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="dateObjEvents"
              :view="myView"
              :selectedDate="selectedDateObj"
              @selected-date-change="selectedDateObj = $event.date"
            />
          </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">
              <MbscButton @click="addDateISOEvent">
                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="dateISOEvents"
              :view="myView"
              :selectedDate="selectedDateISO"
              @selected-date-change="selectedDateISO = $event.date"
            />
          </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">
              <MbscButton @click="addDateMomentEvent">
                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="dateMomentEvents"
              :view="myView"
              :selectedDate="selectedDateMoment"
              @selected-date-change="selectedDateMoment = $event.date"
            />
          </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 = {
  scheduler: {
    type: 'week'
  }
}

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="addDateObjEvent">
                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="dateObjEvents"
              :view="myView"
              :selectedDate="selectedDateObj"
              @selected-date-change="selectedDateObj = $event.date"
            />
          </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">
              <MbscButton @click="addDateISOEvent">
                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="dateISOEvents"
              :view="myView"
              :selectedDate="selectedDateISO"
              @selected-date-change="selectedDateISO = $event.date"
            />
          </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">
              <MbscButton @click="addDateMomentEvent">
                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="dateMomentEvents"
              :view="myView"
              :selectedDate="selectedDateMoment"
              @selected-date-change="selectedDateMoment = $event.date"
            />
          </div>
        </div>
      </div>
    </div>
  </MbscPage>
</template>
```

## Implementation notes

- Render three separate `Eventcalendar` instances side by side in a 3-column grid. Use `view: { scheduler: { type: 'week' } }` for all three.
- **JavaScript `Date` object**: pre-load one event using `new Date(2020, 4, 19, 7)` start and `new Date(2020, 4, 19, 8)` end. Navigate to `new Date(2020, 4, 19)` on init. A second event can be added using the `new Date(...)` format, followed by navigation to it.
- **ISO 8601 string**: pre-load one event with `'2020-05-20T07:00:00'` start and `'2020-05-20T08:00:00'` end. Navigate to `'2020-05-20'` on init. A second event can be added using ISO strings, followed by navigation to it.
- **Moment.js object**: import `moment`; pre-load one event using `moment([2020, 4, 21, 7])` and `moment([2020, 4, 21, 8])`. Navigate to `moment([2020, 4, 21])` on init. A second event can be added using moment objects, followed by navigation to it.
- **Navigation**: bind `selectedDate` to a state variable using the same date format as that column; for the imperative API, call `inst.navigate(date)` with the matching format.
- The key insight: `start`, `end`, `selectedDate`, and `.navigate()` all accept Date objects, ISO strings, and Moment objects interchangeably.

## 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/scheduler/event-data-structure.md) - Define event data in the Vue Scheduler — set base fields, recurring rules, resource links, drag/resize controls, and buffer times.
- Next: [Recurring Events](https://demo.mobiscroll.com/vue/scheduler/recurring-events.md) - Add recurring events to the Vue Scheduler — configure daily, weekly, monthly, or yearly rules with RRULE string support.