Using with TypeScript

Overview

Mobiscroll for Vue comes with type definition files that allow better usage in TypeScript environments. The options, events and data structures of the components are described by interfaces, which have the same names as the types listed on the API pages, for example MbscCalendarEvent.

Installing types

Type definition files come with the extension *.d.ts and are included in every Mobiscroll package. Installing and importing the Mobiscroll package makes the types available as well, there is no separate @types package to install. For setting up the package, see the installation guide.

The props and event handlers passed to the Mobiscroll components in the templates are checked by vue-tsc, the type checker for .vue files.

Usage

The types are exported from the @mobiscroll/vue package, next to the components. Import the types with import type. Projects created with create-vue turn on the verbatimModuleSyntax compiler option (through @vue/tsconfig), which requires it: a type imported without type is reported as an error and stays in the compiled code, where it fails at runtime.

<script setup lang="ts">
import { MbscEventcalendar } from '@mobiscroll/vue';
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue';
</script>

Typing data

Typing the data passed to the components gives auto-suggest for the available properties and catches mistakes during compilation.

Typed data and view

<script setup lang="ts">
import { ref } from 'vue';
import { MbscEventcalendar } from '@mobiscroll/vue';
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue';
import '@mobiscroll/vue/dist/css/mobiscroll.min.css';

const myEvents = ref<MbscCalendarEvent[]>([
  { start: '2025-06-02T09:00', end: '2025-06-02T10:00', title: 'Planning meeting' },
  { start: '2025-06-04', allDay: true, title: 'Conference' },
]);

const myView: MbscEventcalendarView = {
  calendar: { type: 'month' },
  agenda: { type: 'month' },
};
</script>

<template>
  <MbscEventcalendar :data="myEvents" :view="myView" />
</template>

Typing event handlers

Every event handler receives two arguments: an object with the event-specific data, and the component instance. The type of the first argument is listed for each event on the API page, for example @event-click receives an MbscEventClickEvent. Handlers written inline in the template get these types automatically.

Typed event handlers

<script setup lang="ts">
import { MbscEventcalendar } from '@mobiscroll/vue';
import type { MbscEventClickEvent, MbscEventCreateEvent } from '@mobiscroll/vue';

function handleEventClick(args: MbscEventClickEvent) {
  console.log(args.event);
}

function handleEventCreate(args: MbscEventCreateEvent) {
  if (args.event.allDay) {
    // Returning false prevents the creation of the event
    return false;
  }
}
</script>

<template>
  <MbscEventcalendar
    :click-to-create="true"
    @event-click="handleEventClick"
    @event-create="handleEventCreate"
  />
</template>

Returning false to prevent an action is described on the CRUD page.