Mobiscroll for React

https://mobiscroll.com/docs/react
Admin
Mobiscroll for React is a collection of UI components, including date pickers, calendars, and form...
Tokens:312,370
Snippets:2,412
Trust Score:9.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Prompt with @docs for weekly scheduler setup

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Example prompt to ask Cursor about Mobiscroll. Include @docs to ensure it reads the registered documentation source.

```text
@docs How do I set up a weekly scheduler with Mobiscroll?
```

--------------------------------

### Dockerfile for Mobiscroll CI/CD

Source: https://mobiscroll.com/docs/react/getting-started/installation

Dockerfile example for CI/CD setups. It copies the .npmrc file (or .yarnrc.yml for Yarn 2/3) together with package.json so the install process has access to the Mobiscroll NPM registry.

```bash
FROM node:18.12.0 as build

ENV NODE_ENV production

WORKDIR /app

COPY package.json package-lock.json .npmrc ./

RUN npm install

COPY . .

# ...
```

--------------------------------

### Google Calendar Sync Client and Server Setup

Source: https://mobiscroll.com/docs/react/eventcalendar/calendar-integrations

Complete example showing client-side initialization with googleCalendarSync.init and a server-side Node.js implementation for OAuth token exchange and refresh. The server handles /auth and /refresh endpoints, including CORS preflight and CSRF checks.

```javascript
// Client

googleCalendarSync.init({
  auth: 'server',
  authUrl: 'http://example.com/auth',
  clientId: 'YOUR_CLIENT_ID',
  refreshUrl: 'http://example.com/refresh',
});

// Server
const http = require('http');
const https = require('https');

const YOUR_CLIENT_ID = 'YOUR_CLIENT_ID';
const YOUR_CLIENT_SECRET = 'YOUR_CLIENT_SECRET';

function getToken(type, codeOrToken, callback) {
    const postData =
        'client_id=' + YOUR_CLIENT_ID + '&' +
        'client_secret=' + YOUR_CLIENT_SECRET + '&' +
        (type === 'refresh' ?
            'grant_type=refresh_token&' +
            'refresh_token=' + codeOrToken
            :
            'grant_type=authorization_code&' +
            'code=' + codeOrToken + '&' +
            'redirect_uri=postmessage&' +
            'code_verifier='
        )

    const postOptions = {
        host: 'oauth2.googleapis.com',
        port: '443',
        path: '/token',
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Content-Length': Buffer.byteLength(postData)
        }
    };

    const postReq = https.request(postOptions, function (response) {
        response.setEncoding('utf8');
        response.on('data', d => {
            callback(d);
        });
    });

    postReq.on('error', (error) => {
        console.log(error)
    });

    // Post the request with data
    postReq.write(postData);
    postReq.end();
}

function getPostData(req, callback) {
    let body = '';

    req.on('data', (data) => {
        body += data;
    });

    req.on('end', () => {
        const parsed = new URLSearchParams(body);
        const data = {}
        for (const pair of parsed.entries()) {
            data[pair[0]] = pair[1];
        }
        callback(data);
    });
}

function checkCSRF(req, res) {
    // Check if CSRF header is present
    if (req.headers['x-requested-with'] === 'XmlHttpRequest') {
        return true;
    }
    // Otherwise end the request
    res.statusCode = 500;
    res.end();
    return false;
}

function sendResponse(res, data) {
    // Set the headers in case of CORS request
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With');
    // Send data
    res.end(data);
}

const server = http.createServer(function (req, res) {
    if (req.method === 'OPTIONS') { // Handle preflight request (in case of CORS request)
        res.setHeader('Access-Control-Allow-Origin', '*'); // Use your own domain instead of the '*'
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With');
        res.end();
    } else if (req.url.startsWith('/auth')) { // Handle auth
        if (checkCSRF(req, res)) {
            getPostData(req, (data) => {
                // Exchange auth code to access token (on sign in)
                getToken('auth', data.code, (token) => {
                    sendResponse(res, token);
                });
            });
        }
    } else if (req.url.startsWith('/refresh')) { // Handle refresh
        if (checkCSRF(req, res)) {
            getPostData(req, (data) => {
                // Exchange refresh token to access token (on access token expiry)
                getToken('refresh', data.refresh_token, (token) => {
                    sendResponse(res, token);
                });
            });
        }
    }
});

server.listen(8080);
```

--------------------------------

### Install luxon with npm

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Installs the Luxon library via npm, required for timezone-aware date selection with the Luxon plugin.

```bash
npm install luxon
```

--------------------------------

### Install Mobiscroll plugin

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Installs the Mobiscroll plugin, which bundles framework coding skills and the MCP server. Note that installing takes a snapshot of skills; to update, run `/plugins marketplace update mobiscroll` then reinstall.

```shell
/plugins install mobiscroll@mobiscroll
```

--------------------------------

### Install @types/luxon for TypeScript

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Installs the TypeScript type definitions for Luxon as a dev dependency, needed when using TypeScript.

```bash
npm install --save-dev @types/luxon
```

--------------------------------

### DHTMLX Scheduler dataProcessor setup

Source: https://mobiscroll.com/docs/react/guides/migrating-from-dhtmlx-to-mobiscroll

DHTMLX Scheduler example that initializes the scheduler, loads events from '/api/events', and attaches a dataProcessor with mode 'REST' to handle CRUD operations. The cleanup function destroys the scheduler and clears the container.

```jsx
import { useEffect, useRef } from 'react';
import { Scheduler } from '@dhx/trial-scheduler';
import '@dhx/trial-scheduler/codebase/dhtmlxscheduler.css';

export default function SchedulerView() {
  let container = useRef();
  useEffect(() => {
    const cont = container.current;
    const scheduler = Scheduler.getSchedulerInstance();

    scheduler.init(cont);
    
    scheduler.load('/api/events');
    
    const dp = scheduler.createDataProcessor({
      url: '/api/events',
      mode: 'REST',
    });

    return () => {
      scheduler.destructor();
      cont.innerHTML = '';
    };
  }, []);

  return <div ref={container} style={{ width: '100%', height: '100%' }}></div>;
}
```

--------------------------------

### Setup setupTests.js for Mobiscroll testing

Source: https://mobiscroll.com/docs/react/guides/unit-testing

Imports the testing-library matchers and vitest-canvas-mock in the setupTests.js file located in the src folder. This setup is required for Mobiscroll Components to be tested without errors.

```js
import "@testing-library/vitest-dom";
import "vitest-canvas-mock"; // required for Mobiscroll Components
```

--------------------------------

### Install dayjs with npm

Source: https://mobiscroll.com/docs/react/datepicker/timezones

Installs the Day.js library via npm, required for timezone-aware date selection with the Day.js plugin.

```bash
npm install dayjs
```

--------------------------------

### Install sass for create-react-app

Source: https://mobiscroll.com/docs/react/guides/working-with-the-source

To import SASS files in a create-react-app project, install the sass library with this command.

```bash
$ npm install sass --save-dev
```

--------------------------------

### Install vitest-canvas-mock

Source: https://mobiscroll.com/docs/react/guides/unit-testing

Installs the vitest-canvas-mock package, which is required for Mobiscroll Components to be testable in a Vitest environment.

```bash
npm install vitest-canvas-mock --save
```

--------------------------------

### Install and configure Mobiscroll CLI for React

Source: https://mobiscroll.com/docs/react/guides/migrating-from-dhtmlx-to-mobiscroll

Install the Mobiscroll CLI globally and configure it for a React project. The CLI is only needed once, and configuration should be run from the project root folder.

```bash
npm install -g @mobiscroll/cli
```

```bash
mobiscroll config react
```

--------------------------------

### Install and configure Mobiscroll CLI

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Install the Mobiscroll CLI globally and configure it for the target framework. The CLI generates the .npmrc file with the auth token and installs the correct @mobiscroll/<framework> package automatically. Manual .npmrc editing is only a last resort for CI/CD environments where the CLI cannot run.

```bash
npm install -g @mobiscroll/cli
mobiscroll config <framework>   # vue | react | angular | javascript | jquery
```

--------------------------------

### Example queries for AI integration

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Example queries that the AI integration is designed to handle correctly, covering Eventcalendar creation, drag and drop support, and calendar event types.

```text
How do I create an Eventcalendar with a weekly scheduler view?
Add drag and drop support to my Mobiscroll timeline.
What is the type for calendar events in Mobiscroll React?
```

--------------------------------

### Responsive configuration with the view option

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Configure the Timeline's responsive behavior using the 'responsive' option with built-in breakpoints (xsmall, small, medium, large, xlarge) and a custom breakpoint. The available width is queried from the container element, not the viewport. The example sets different timeline views for xsmall, medium, and a custom breakpoint at 1000px.

```jsx
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const myResponsive = {
    xsmall: {
      view: { timeline: { type: 'day', size: 2 }}
    },
     medium: {
      view: {
        timeline: { type: 'week' }
      }
    },
    custom: { // Custom breakpoint, you can use multiple if needed, but each must have a unique name.
      breakpoint: 1000,
      view: { timeline: { type: 'month' }}
    }
  };

  return <Eventcalendar responsive={myResponsive} />
}
```

--------------------------------

### Shifted days with startTime and endTime

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Configures the timeline view to start at 20:00 on the previous day and end at 06:00 on the next day using day-offset formats. Requires type: 'day' and the default hourly resolutionHorizontal.

```ts
view: {
  timeline: {
      type: 'day',
      resolutionHorizontal: 'hour',
      resolutionVertical: 'day',             
      // Starts the view at 20:00 on the previous day
      startTime: '20:00-1', 
      // Ends the view at 06:00 on the next day
      endTime: '06:00+1' 
  }
}
```

--------------------------------

### Configure Timeline view with view option

Source: https://mobiscroll.com/docs/react/eventcalendar/timeline

Example of setting the timeline view options for the Mobiscroll Eventcalendar in React. The view object includes properties like maxEventStack, eventDisplay, resolutionHorizontal, type, and resourceReorder.

```jsx
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {
  const myViewOptions = {
    timeline: {
      maxEventStack: 2,
      eventDisplay: 'fill',
      resolutionHorizontal: 'day',
      type: 'month',
      resourceReorder: true
    }
  };

  return <Eventcalendar view={myViewOptions} />
}
```

--------------------------------

### Bryntum SchedulerPro initialization

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

Bryntum initialization example using the BryntumSchedulerPro component and its Stockholm CSS.

```jsx
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-react';
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';
   
const App = () => {
  return (
      <BryntumSchedulerPro />
  );
};

export default App;
```

--------------------------------

### Range Value Examples for Date and Time

Source: https://mobiscroll.com/docs/react/datepicker/value-selection

Shows example values for date and time ranges, both as ISO strings and Date objects. The range selection returns an array with two values: the start and the end.

```javascript
const dateRangeExample1 = ['2023-10-19', '2023-10-24'];
const dateRangeExample2 = [new Date(2023, 9, 19), new Date(2023, 9, 24)];

const timeRangeExample1 = ['10:00', '13:30'];
const timeRangeExample2 = [new Date(2023, 9, 19, 10, 0), new Date(2023, 9, 19, 13, 30)];
```

--------------------------------

### Project structure for Option A (.instructions.md rules file)

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Place the downloaded mobiscroll-react.instructions.md file in .github/instructions/ within your project. This text-based rules file requires no additional setup.

```text
your-project/
├── .github/
|   └── instructions/
|       └── mobiscroll-react.instructions.md
├── src/
└── package.json
```

--------------------------------

### Install the Mobiscroll plugin

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Installs the Mobiscroll plugin for Claude Code. Note that plugin skills don't auto-update; to get the latest, run `/plugin marketplace update mobiscroll && /plugin update mobiscroll@mobiscroll`, then `/reload-plugins`.

```claude
/plugin install mobiscroll@mobiscroll
```

--------------------------------

### Project structure for Option B (extended instruction files)

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Place the three extended instruction files in .github/instructions/. These files provide orchestrator, React conventions, and theming rules, and can call the MCP server for live schema lookups.

```text
your-project/
├── .github/
|   └── instructions/
|       ├── mobiscroll-ui.instructions.md
|       ├── mobiscroll-ui-react.instructions.md
|       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json
```

--------------------------------

### extendDefaultEvent option example

Source: https://mobiscroll.com/docs/react/eventcalendar/calendar

Use this option to set properties to a new event created with click or drag. The function receives an object with 'start' and 'resource' properties and should return the event properties. The example sets the event color based on the resource id and a default title.

```javascript
extendDefaultEvent: (args) => {
  return {
    color: args.resource === 'admin' ? 'green' : 'red',
    title: 'My event',
  };
}
```

--------------------------------

### Event structure comparison: Bryntum vs Mobiscroll

Source: https://mobiscroll.com/docs/react/guides/migrating-from-bryntum-to-mobiscroll

Comparison of event structure between Bryntum and Mobiscroll. Bryntum uses the `events` option with `startDate`, `duration`, and `durationUnit`; Mobiscroll uses the `data` option with explicit `start` and `end` properties. The Bryntum example uses `BryntumSchedulerPro` and the Mobiscroll example uses `Eventcalendar`.

```jsx
import { useMemo } from 'react';
import { BryntumSchedulerPro } from '@bryntum/schedulerpro-react';
import '@bryntum/schedulerpro/schedulerpro.stockholm.css';

const App = () => {

  const myEvents = useMemo(
    () => [
      {
        id: 1,
        resourceId: 'r1',
        startDate: new Date(2017, 0, 1, 10),
        duration: 2,
        durationUnit: 'h',
        name: 'Click me'
      }
    ],
    [],
  );

  return (
    <BryntumSchedulerPro
      events={myEvents}
    />
  );
};

export default App;
```

```jsx
import { useMemo } from 'react';
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {

  const myEvents = useMemo(
    () => [
      {
        id: 1, 
        resource: 'r1',
        start: '2017-01-01T10:00',
        end: '2017-01-01T12:00',
        title: 'Click me'
      }
    ],
    [],
  );

  return (
    <Eventcalendar
      data={myEvents}
    />
  );
}

export default App;
```

--------------------------------

### Project structure with MCP server configuration

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Shows the full project layout after adding the MCP server configuration and the extended instruction files.

```text
your-project/
├── .vscode/
│   └── mcp.json
├── .github/
│   └── instructions/
│       ├── mobiscroll-ui.instructions.md
│       ├── mobiscroll-ui-react.instructions.md
│       └── mobiscroll-ui-theming.instructions.md
├── src/
└── package.json
```

--------------------------------

### Import and pass print module to Eventcalendar

Source: https://mobiscroll.com/docs/react/eventcalendar/print

Import the print module from @mobiscroll/print and pass it to the Eventcalendar via the modules option. This example shows the required imports and component setup.

```jsx
import { print } from '@mobiscroll/print';
import { Eventcalendar } from "@mobiscroll/react";
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

const MY_MODULES = [print];

function App() {
  return <Eventcalendar modules={MY_MODULES} />
}
```

--------------------------------

### Configure MCP server in config.toml

Source: https://mobiscroll.com/docs/react/guides/ai-integration

Optional manual configuration for the bundled MCP server. Add to `~/.codex/config.toml` (global) or `.codex/config.toml` (project). Use the project-level file for team repos so everyone gets the server automatically.

```toml
[mcp_servers.mobiscroll]
url = "https://mcp.mobiscroll.com/"
```

--------------------------------

### Example: Setting timezone options with moment-timezone

Source: https://mobiscroll.com/docs/react/eventcalendar/timezones

Sets up the moment-timezone plugin and configures the Eventcalendar to use UTC as the data timezone and Europe/Berlin as the display timezone. Requires installing moment-timezone and assigning it to momentTimezone.moment.

```jsx
import { useState } from "react";
// highlight-next-line
import moment from 'moment-timezone';
import { Eventcalendar, momentTimezone } from "@mobiscroll/react";
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

// setup the reference to moment
// highlight-next-line
momentTimezone.moment = moment;

function App() {
  const [myEvents] = useState([]);

  return <Eventcalendar
    data={myEvents}
    // highlight-start
    timezonePlugin={momentTimezone}
    dataTimezone="utc"
    displayTimezone="Europe/Berlin"
    // highlight-end
  />
}
```

--------------------------------

### Mobiscroll Eventcalendar event structure example

Source: https://mobiscroll.com/docs/react/guides/migrating-from-dhtmlx-to-mobiscroll

Mobiscroll Eventcalendar React component that uses the `data` option with events structured as `id`, `resource`, `start`, `end`, and `title`. The `useMemo` hook ensures the events array is memoized.

```jsx
import { useMemo } from 'react';
import { Eventcalendar } from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

function App() {

  const myEvents = useMemo(
    () => [
      {
        id: 1, 
        resource: 'r1',
        start: '2017-01-01T10:00',
        end: '2017-01-01T12:00',
        title: 'Click me'
      }
    ],
    [],
  );

  return (
    <Eventcalendar
      data={myEvents}
    />
  );
}

export default App;
```

--------------------------------

### responsive option example

Source: https://mobiscroll.com/docs/react/eventcalendar/agenda

Configures the responsive option with predefined breakpoints (small, large) and a custom breakpoint named 'custom' with a min-width of 600px. The display values 'bottom', 'center', and 'anchored' are used as examples.

```javascript
responsive: {
  small: {
    display: 'bottom'
  },
  custom: { // Custom breakpoint, you can use multiple, but each must have a unique name
    breakpoint: 600,
    display: 'center'
  },
  large: {
    display: 'anchored'
  }
}
```
Tokens:
Raw