Popup

• 'pop'
• 'slide-down'
• 'slide-up'

• 'ok' - Approve action (if applicable). It's the same as the 'set' button, but will display the caption specified by the okText setting. Just like the 'set' button, it will trigger the onSet event, when pressed.
• 'cancel' - Dismisses the popup.

• text String - Text of the button.
• handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
  • 'set' - Approve action (if applicable).
  • 'cancel' - Dismisses the popup.
• icon String (Optional) - Icon of the button.
• cssClass String (Optional) - Css class of the button.
• disabled Boolean (Optional) - Sets the disabled state of the button.
• keyCode Number, String, Array (Optional) - The key code associated with the button to activate it from keyboard. Can be a single value or multiple value passed as an array. Predifine string values are: 'enter', 'esc' and 'space'.

buttons: [
    'set',
    {
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: function (event) {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]

buttons: [
    'set',
    {
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]

• 'center' - The component appears as a popup at the center of the viewport.
• 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
• 'anchored' - The component appears positioned to the element defined by the anchor option. By default the anchor is the original element.
• 'top' - The component appears docked to the top of the viewport.
• 'bottom' - The component appears docked to the bottom of the viewport.

The default display mode depends on the theme, it defaults to 'bottom' for the iOS theme and to 'center' for all other themes.

• xsmall - min-width: 0px
• small - min-width: 576px
• medium - min-width: 768px
• large - min-width: 992px
• xlarge - min-width: 1200px

responsive: {
    small: {
        display: 'bottom'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        display: 'center'
    },
    large: {
        display: 'anchored'
    }
}

Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

• 'ios' - iOS theme
• 'material' - Material theme
• 'windows' - Windows theme

Controls which variant of the theme will be used (light or dark).

• 'light' - Use the light variant of the theme.
• 'dark' - Use the dark variant of the theme.
• 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Use true to render a touch optimized user interface, or false for a user interface optimized for pointer devices (mouse, touchpad).

Can be used with the responsive option to change the user interface based on viewport width.

If set to 'auto', the touch UI will be automatically enabled based on the platform.

Parameters

• event: Object - The event object.
  • source: String - Determins what triggered the close event. Can be one of 'set', 'cancel', 'ok', 'close', 'overlay', 'esc', 'scroll'.
• inst: Object - The instance object of the popup.

Example

<mobiscroll.Popup
    onClose={function (event, inst) {
    }}
/>

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the popup.

Example

<mobiscroll.Popup
    onDestroy={function (event, inst) {
    }}
/>

Parameters

• event: Object - The event object.
• inst: Object - The instance object of the popup.

Example

<mobiscroll.Popup
    onInit={function (event, inst) {
    }}
/>

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
• inst: Object - The instance object of the popup.

Example

<mobiscroll.Popup
    onOpen={function (event, inst) {
    }}
/>

Parameters

• event: Object - The event object has the following properties:
  • target: Object - The DOM element containing the generated html.
  • windowWidth: Number - The window width.
  • windowHeight: Number - The window height.
• inst: Object - The instance object of the popup.

Example

<mobiscroll.Popup
    onPosition={function (event, inst) {
    }}
/>

Example

mobiscrollInstance.close();

Returns: Boolean

• True if the component is visible, false if it's not.

Example

mobiscrollInstance.isVisible();

Example

mobiscrollInstance.open();

Example

mobiscrollInstance.position();

• Arabic: localeAr, 'ar'
• Bulgarian: localeBg, 'bg'
• Catalan: localeCa, 'ca'
• Czech: localeCs, 'cs'
• Chinese: localeZh, 'zh'
• Croatian: localeHr, 'hr'
• Danish: localeDa, 'da'
• Dutch: localeNl, 'nl'
• English: localeEn or undefined, 'en'
• English (UK): localeEnGB, 'en-GB'
• Farsi: localeFa, 'fa'
• German: localeDe, 'de'
• Greek: localeEl, 'el'
• Spanish: localeEs, 'es'
• Finnish: localeFi, 'fi'
• French: localeFr, 'fr'
• Hebrew: localeHe, 'he'
• Hindi: localeHi, 'hi'
• Hungarian: localeHu, 'hu'
• Italian: localeIt, 'it'
• Japanese: localeJa, 'ja'
• Korean: localeKo, 'ko'
• Lithuanian: localeLt, 'lt'
• Norwegian: localeNo, 'no'
• Polish: localePl, 'pl'
• Portuguese (Brazilian): localePtBR, 'pt-BR'
• Portuguese (European): localePtPT, 'pt-PT'
• Romanian: localeRo, 'ro'
• Russian: localeRu, 'ru'
• Russian (UA): localeRuUA, 'ru-UA'
• Slovak: localeSk, 'sk'
• Serbian: localeSr, 'sr'
• Swedish:localeSv, 'sv'
• Thai: localeTh, 'th'
• Turkish: localeTr, 'tr'
• Ukrainian: localeUa, 'ua'
• Vietnamese: localeVi, 'vi'

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

export function MyComponent() {
  return <Eventcalendar locale={localeDe} />;
}

In some cases it's more convenient to set the locale using the language code string. You can do that by using the locale object, which contains all translations by language codes as keys.

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

export function MyComponent() {
  return <Eventcalendar locale={locale['de']} />;
}