Using with TypeScript

Overview

Mobiscroll for React 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.

Usage

The types are exported from the @mobiscroll/react package, next to the components, and can be imported like any other export. If the verbatimModuleSyntax compiler option is turned on in your project, import the types with import type instead: a type imported without type is reported as an error.

import { Eventcalendar, MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/react';

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

import { useMemo } from 'react';
import { Eventcalendar, MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

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

  const myView = useMemo<MbscEventcalendarView>(() => ({
    calendar: { type: 'month' },
    agenda: { type: 'month' },
  }), []);

  return <Eventcalendar data={myEvents} view={myView} />;
}

export default App;

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 onEventClick receives an MbscEventClickEvent. Handlers written inline get these types automatically.

Typed event handlers

import { useCallback } from 'react';
import { Eventcalendar, MbscEventClickEvent, MbscEventCreateEvent } from '@mobiscroll/react';

function App() {
  const handleEventClick = useCallback((args: MbscEventClickEvent) => {
    console.log(args.event);
  }, []);

  const handleEventCreate = useCallback((args: MbscEventCreateEvent) => {
    if (args.event.allDay) {
      // Returning false prevents the creation of the event
      return false;
    }
  }, []);

  return (
    <Eventcalendar
      clickToCreate={true}
      onEventClick={handleEventClick}
      onEventCreate={handleEventCreate}
    />
  );
}

export default App;

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

Typing render functions

The arguments of the render functions are typed as well. The argument types are listed on the API page, for example renderResource receives an MbscResource. More about render functions on the templating page.

Typed render function

import { useCallback, useMemo } from 'react';
import { Eventcalendar, MbscEventcalendarView, MbscResource } from '@mobiscroll/react';

function App() {
  const myResources = useMemo<MbscResource[]>(() => [
    { id: 1, name: 'Room A', capacity: 8 },
    { id: 2, name: 'Room B', capacity: 20 },
  ], []);

  const myView = useMemo<MbscEventcalendarView>(() => ({ timeline: { type: 'week' } }), []);

  const renderMyResource = useCallback((resource: MbscResource) => (
    <>
      <div>{resource.name}</div>
      <div>{resource.capacity} seats</div>
    </>
  ), []);

  return <Eventcalendar view={myView} resources={myResources} renderResource={renderMyResource} />;
}

export default App;