New release: Mobiscroll 5.0 Beta 1

Announcements
1

What’s New

I am super excited to finally share what we’ve been working on for a while. Happy to unveil the brand new Scheduler component and much more with the Mobiscroll 5 beta 1 .

We are shipping Mobiscroll 5 in steps and the first beta features Event calendar, Popup, the brand new Scheduler, most of the Form elements - Button, Input, Dropdown, Textarea, Checkbox, Switch, Radio, Segmented & Notifications and Date & time picker with limited functionality.

Scheduler

It features a full-blown schedule view with daily and weekly grids, a scrollable 24 hour view optimized for mobile & desktop.

The scheduler can be used and combined with the calendar and agenda from the event calendar.

2116×1622 1.01 MB

Responsive daily and weekly scheduler

Event calendar

We have rebuilt the event calendar from the ground up, with more customization options, more advanced recurring events and an updated look & feel.

750×698 1.11 MB

Event Calendar with quick navigation control

Dynamic global and component options

Thanks to the rewrite the component options became truly dynamic. Options like the locale, theme, theme variant and more can be updated on the fly. While keeping the component state the DOM will be updated only where necessary.

2528×1504 578 KB

Updated and smarter themes

Besides the stand-alone component updates, options can be changed globally. You can now update options like theme for all initialized components rather than performing it one by one.

760×1072 430 KB

Dynamic light & dark mode

Angular and React components

Mobiscroll 5 ships real Angular and React components, for a perfect integration. We moved away from the previously used wrapper approach.

This means DOM manipulation is delegated to the framework: Angular components are using Angular’s renderer module, while React components use React’s virtual DOM.

jQuery and Javascript components

While the usage of the jQuery and plain javascript components remains the same as in previous versions (except some API changes listed below), the approach behind is completely different.

The components are sharing a common core with the React components, and a bundled virtual DOM library manages the rendering. This way, just like in React and Angular, the components are fully dynamic, updating options on the fly will not re-render the whole component markup completely as in previous versions, it will only update the DOM where it needs to be changed.

Read the full blog post

MOBISCROLL 5.0-beta1

Datetime

REMOVED

  • We removed the tap method.

CHANGED

  • The react component will render a mobiscroll input by default, instead of a standard html input. Use the inputOptions option to pass configuration to the rendered mobiscroll input, or have the global settings applied.
  • We renamed the animate option to animation to specify the show / hide animation of the picker.
  • We renamed the height option to itemHeight for setting the height of the wheel items.
  • We renamed the width option to wheelWidth for setting the exact width of the wheels.
  • We renamed the maxWidth option to maxWheelWidth for setting the maximum width of the wheels.
  • We renamed the minWidth option to minWheelWidth for setting the minimum width of the wheels.
  • We renamed the showOnTap option to showOnClick for the sake of simplicity and to make it more obvious.
  • We’ve broken up the steps option into stepHour , stepMinute and stepSecond .
  • We updated the format of the dateFormat and timeFormat options to avoid some common confusions we met. See the API docs for the new formatting tokens.
  • We renamed the onSet event to onChange and the onShow event to onOpen for more clarity. This was part of the lifecycle event cleanup we performed.
  • We renamed the show method to open and the hide method to close .

Eventcalendar

NEW

  • We added the selectedDate option for setting, changing the active date on the calendar.
  • We added the defaultSelectedDate option for specifying the initially selected date.
  • We added the showControls option to show or hide the calendar header controls like previous, next, today buttons along with the view range.
  • We added the renderEvent and eventTemplate options for custom event rendering that can be used in the agenda or popover event listing.
  • We added the renderAgenda and agendaTemplate options for a fully custom, external agenda rendering.

REMOVED

  • We removed the following options: anchor , animate , buttons , closeOnOverlayTap , display , focusOnClose , focusTrap , formatDuration , headerText , showOnFocus , showOnTap , yearChange .
  • We removed the following events: onBeforeClose , onBeforeShow , onClose , onPosition , onShow .
  • We removed the following methods: hide , isVisible , position , redraw , refresh , show , tap .

CHANGED

  • We improved our recurring event support. More complex recurrence rules can be passed through the recurring property of an event as an object or as a string in RRULE format. Currently daily, weekly, monthly and yearly repeats are supported.
  • We slightly changed the structure of event objects. Instead of text , title should be used, and instead of the d property use the recurring property to create recurring events.
  • We slightly changed the structure of the marked , label and color objects. To specify the date, use the date property, or the start and end properties for multiple days, and use the recurring property to specify multiple occurrences.
  • We changed the format of the dateFormat and timeFormat options to avoid some common confusions we met. See the API docs for the new formatting tokens.
  • As part of the the lifecycle event cleanup, we renamed the onEventSelect event to onEventClick , the onDayChange event to onCellClick and the onSetDate event to onSelectedDateChange .
  • We renamed the calendarHeight option to height and changed its scope to the full calendar with header and everything.
  • We renamed the calendarWidth option to width .
  • We moved the calendarScroll option into the view option under view.calendar.scroll .
  • We moved the eventBubble option into the view option under view.calendar.popover .
  • We moved the showEventCount option into the view option under view.calendar.count .
  • We moved the showOuterDays option into the view option under view.calendar.outerDays .
  • We moved the weeks option into the view option under view.calendar.size .
  • We moved the weekCounter option into the view option under view.calendar.weekNumbers .
  • We renamed the eventList property of the view option to agenda .

Forms

NEW

  • We added the label option to specify the label of the input.
  • We added the startIconSvg and endIconSvg options to pass svg markup as string for the input icons.
  • We added the position option to the Checkbox, Radio and Switch components to specify where it should be positioned. Can be 'start' or 'end' . This ultimately controls how the actual control is laid out, on the right or the left.

CHANGED

  • We removed the iconAlign option, and added the startIcon and endIcon options instead to specify the input icons.
  • We added the variant option to the button, which can be 'standard' , 'flat' , or 'outline' .

General

NEW

  • System variant (light or dark) detection is now dynamic: if the system theme changes, the components are updated accordingly without the need to reload the page.

REMOVED

  • We dropped support for AngularJS (1.x) and Angular 2. In case of Angular the minimum required version is 4.

CHANGED

  • We removed the global mobiscroll.settings object and added the setOptions function to set the global options for the components. The new setOptions function is dynamic, meaning that changing the global options runtime will update all initialized components.
  • We renamed the option method to setOptions for all components. Use it to dynamically update the options of a component.
  • We renamed the lang option to locale for localizing the components. Instead of a string now it accepts an object containing the localization settings. Localization objects can be imported like import { localeDe, localeHu } from '/path/to/mobiscroll'; in case of ES6, or accessed as mobiscroll.localeDe in case of ES5 usage.
  • We moved the getJson function to mobiscroll.util.http.getJson . In ES6 it can also be imported directly: import { getJson } from '/path/to/mobiscroll';.

Popup

NEW

  • We added the width option to specify the width of the popup. Accepts any valid css value.
  • We added the height option to specify the height of the popup. Accepts any valid css value.
  • We added the maxWidth option to specify the max width of the popup. Accepts any valid css value.
  • We added the maxHeight option to specify the max height of the popup. Accepts any valid css value.

REMOVED

  • We removed the tap method.

CHANGED

  • We renamed the animate option to animation to specify the show / hide animation of the popup.
  • For the sake of clarity we renamed the showOnTap option to showOnClick and the onShow event to onOpen .
  • We renamed the show method to open and the hide method to close .

Scheduler

NEW

  • We added the brand new scheduler to the Event Calendar product line for displaying the events on a 24-hour grid. Can be enabled using the view option.

For the full changelog please visit our release history. The beta is available to customers with and active Event Calendar or Framework and Complete license. Get in touch if you are interested.

PS. You will find an upgrade guide for moving from Mobiscroll 4 to Mobiscroll 5.