mobiscroll-ui-javascript

Mobiscroll — JavaScript Patterns

This skill is loaded by mobiscroll-ui. If you arrived here directly, invoke mobiscroll-ui first to run environment detection and the mandatory schema lookup.

Package: @mobiscroll/javascript CSS import: import '@mobiscroll/javascript/dist/css/mobiscroll.min.css'

Initialization Pattern

import * as mobiscroll from '@mobiscroll/javascript';

var inst = mobiscroll.eventcalendar('#my-calendar', {
  data: events,
  view: { scheduler: { type: 'week' } },
  onEventCreate: function (args) {
    // handle
  }
});

Component factory functions are lowercase: mobiscroll.eventcalendar(), mobiscroll.datepicker(), mobiscroll.select(), mobiscroll.popup().

Key Conventions

• Initialization targets a DOM element (CSS selector string or HTMLElement reference).
• All configuration passes as an options object (second argument).
• Event handlers are properties in the options object: onEventCreate, onCellClick.
• The factory function returns an instance with methods: inst.setOptions(), inst.getEvents(), inst.destroy().
• No JSX, no templates, no decorators — pure DOM + callbacks.

Anti-Patterns

WRONG	RIGHT
import { Eventcalendar } from '@mobiscroll/react'	import * as mobiscroll from '@mobiscroll/javascript'
<Eventcalendar /> JSX component	mobiscroll.eventcalendar('#el', { ... })
React hooks (useState, useEffect)	Vanilla DOM events and callbacks
Angular @Component decorators	Imperative initialization on DOM elements
Vue <script setup> or ref()	Plain JS variables and event handlers
jQuery $('#el').mobiscroll() plugin pattern	mobiscroll.eventcalendar('#el', { ... })
@mobiscroll/react, @mobiscroll/angular, etc.	@mobiscroll/javascript only

Event Handling

mobiscroll.eventcalendar('#el', {
  onEventClick: function (args) {
    console.log(args.event);    // the clicked event object
    console.log(args.domEvent); // the original DOM event
  }
});

Dynamic Updates

var inst = mobiscroll.eventcalendar('#el', { ... });
inst.setOptions({ data: newEvents });

Custom Rendering

// v6: renderSchedulerEvent (v5: renderScheduleEvent — deprecated in v6)
mobiscroll.eventcalendar('#el', {
  renderSchedulerEvent: function (data) {
    return '<div class="custom-event">' + data.title + '</div>';
  }
});

v5 note: renderScheduleEvent (without r) was the correct name in v5. In v6 it is deprecated — use renderSchedulerEvent instead. The same rename applies to all *Content variants.

Always verify available render options via mcp__mobiscroll__getComponentSchema.