Date Input Formats
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.
Demo
JS date object
start: new Date(2020, 4, 19, 12, 45),
end: new Date(2020, 4, 19, 13, 45)ISO date string
start: '2020-05-20T16:30:00',
end: '2020-05-20T18:00:00'Moment.js object
start: moment([2020, 4, 21, 14]),
end: moment([2020, 4, 21, 15])
SFC JSSFC TS
<script setup>
import {
MbscButton,
MbscEventcalendar,
MbscPage,
setOptions
} from '@mobiscroll/vue'
import moment from 'moment'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
: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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
: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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:data="dateMomentEvents"
:view="myView"
:selectedDate="selectedDateMoment"
@selected-date-change="selectedDateMoment = $event.date"
/>
</div>
</div>
</div>
</div>
</MbscPage>
</template>
<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({
locale: ,
theme: ' ',
themeVariant: ' '
})
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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
: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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
: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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete=""
:data="dateMomentEvents"
:view="myView"
:selectedDate="selectedDateMoment"
@selected-date-change="selectedDateMoment = $event.date"
/>
</div>
</div>
</div>
</div>
</MbscPage>
</template>