Date Format Inputs
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.
Demo
JS date object
start: new Date(2020, 4, 19, 10, 45),
end: new Date(2020, 4, 19, 11, 45)ISO date string
start: '2020-05-20T12:30:00',
end: '2020-05-20T13:00:00'Moment.js object
start: moment([2020, 4, 21, 11]),
end: moment([2020, 4, 21, 14])
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 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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :data="momentData" :view="myView" :selectedDate="selectedMoment" />
</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 = {
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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :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="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :data="momentData" :view="myView" :selectedDate="selectedMoment" />
</div>
</div>
</div>
</div>
</MbscPage>
</template>