@mobiscroll/javascript-lite

Open-source JavaScript form, notification and popup components from Mobiscroll — the scheduling, event calendar and resource management UI library. No framework required. Apache-2.0.

Scheduling screens are mostly forms: the dialog that creates an event, the filters above a timeline, the confirmation when something moves. These are those components, built for the rest of Mobiscroll and published on their own.

| Group | Components | | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | Forms | Button, Checkbox, Dropdown, Input, Radio button, Segmented, Stepper, Switch, Textarea | | Notifications | Alert, Confirm, Prompt, Snackbar, Toast | | Popup | Modal dialog, anchored popover, bottom sheet, inline |

The popup handles focus trapping, the ARIA dialog role and keyboard dismissal, so anything built on it behaves the way assistive technology expects. Same design system and theming as the rest of Mobiscroll — a form built with these sits next to a Mobiscroll scheduler without looking bolted on. TypeScript types and both ESM and CommonJS builds are in the package.

The Preact library is bundled inside and handles rendering internally — it's an implementation detail, never exposed in the public API, so components are used through plain DOM attributes and elements as shown below.

Install

npm install @mobiscroll/javascript-lite

Public npm — no CLI, no registry configuration, no licence key.

Usage

Components initialise from the mbsc- attribute — there is no per-element setup call.

<input mbsc-input data-label="Email" type="email" id="email" /> <button mbsc-button id="save">Save</button>

import '@mobiscroll/javascript-lite/dist/css/mobiscroll.min.css';

document.getElementById('save').addEventListener('click', function () {
  mobiscroll.toast({ message: 'Saved' });
});

The stylesheet is loaded through a bundler here; the package also ships it at dist/css/mobiscroll.min.css if you would rather use a <link> tag. For markup added to the page after load, call mobiscroll.enhance(element).

The rest of Mobiscroll UI

This package ships only the components above. The event calendar, scheduler, timeline and date pickers are commercial and distributed separately:

| Group | Components | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Event calendar system | Event Calendar, Scheduler, Timeline, Agenda | | Date and time | Calendar, Date & Time, Range | | Supporting | Select |

They need a trial or a licence and install through the Mobiscroll CLI: https://mobiscroll.com/docs/javascript/getting-started/installation

Links

• Documentation — https://mobiscroll.com/docs/javascript
• Demos — https://demo.mobiscroll.com/javascript
• Mobiscroll scheduling UI — https://mobiscroll.com/scheduling-ui
• Releases and changelog — https://mobiscroll.com/releases
• Issues — https://github.com/acidb/mobiscroll/issues
• Licensed support — https://mobiscroll.com/support
• Licence — https://github.com/acidb/mobiscroll/blob/master/LICENSE