I am happy to announce version 4.6 with new features for the event calendar, listview and Mobiscroll for Angular and React.

Fixed calendar with scrolling event list

Week-view calendar with schedule, month-view with monthly schedule… Depending on the context this is a pretty common scenario. You see a calendar at the top and the list of events below it. Usually, you would also want to keep the calendar in view when the event list is being scrolled. With this latest release, having a fixed calendar and a scrolling event list is supported out of the box. All you have to do is set the scrollable property of the eventList to true. Things like sticky day labels and scrolling to a specific day when the calendar cell is clicked are supported.

You can see it in action with a full month-view, week-view or a dynamic UI.

Use marked days and colored days at the same time

Yes, this should have been working all along, but it wasn’t. It was in part a flaw in the design of how the different day enhancements are handled and was deliberate on the other side. Turns out it actually makes a lot of sense to have colored days along with little dots all at the same time. The only thigh that is still not supported is to have both labels and marked days, other combinations are OK.

Go ahead and take a look how you can color days, add markings and labels. This feature is applicable to the Calendar, Range and Event Calendar components.

The list view gets the desktop treatment

The listview is one of those components that was mobile first. Everything started with gestures, sliding, swipe-away, but with more and more people using it on both mobile and desktop, shortcomings started popping up. With this latest release we are making the usage on desktop better by introducing hover effects, click styling and selected states. Both single select & multi-select is supported. So if you’re using the listview for a master-detail view, having the list item selected while loading all the details in a second-pane, you’ll have an easier time.

Besides the desktop improvements we are introducing the onListEnd event that is triggered when someone scrolls to the end of the list. Why is this useful? Well, it makes implementing a load on demand logic super-simple. In addition to that you can call the showLoading and hideLoading methods to toggle a loading animation while fetching the data. See load on demand in action.

Introducing typescript support to Mobiscroll for React

As typescript is becoming a more common choice for React developers this is a very welcome addition. That means auto-suggest in tools like Visual Studio, type checks… You actually don’t have to do anything in order to get it running, start using the React tools and the IDE will look for the type definitions and use them.

Dynamic option bindings in Angular

For an angular developer this isn’t anything new. Basically if an option changes, it should automagically propagate to the component. While it was supported for some of the Mobiscroll options, this was not working for all of them up until now. No more option method calls for keeping everything in sync.

To learn more about this release explore the demos, browse the documentation and see the changelog. We can’t wait to hear about what you’ll build with the new tools and components.

As always, this release is available for download to all customers who have an active maintenance. You can also update through NPM if that is how you get your libraries.