We are 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’ve been building up to the scheduler for some time. It was somewhat a crucial piece of the puzzle that was missing from the Event calendar product suite. There was an agenda, but not a full-blown scheduler with a 24h grid. So we knew we wanted to make a scheduler, but we wanted to attack it differently. We didn’t want to build it on the existing v4 platform because of numerous shortcomings. We’ll be detailing the challenges and share our thought process in future posts, but long story short… we ended up with a full rewrite, a new architecture and the Scheduler.

You can see at a glance how your events are laid out throughout the day or week and you can easily spot overlaps. It perfectly blends in with the Event Calendar, which received a makeover as well. That means you can combine a monthly calendar view with a daily schedule and things like changing days, synchronizing views will work out of the box.

Responsive daily and weekly schedules on mobile and desktop

You might want to see a weekly schedule on desktop and a daily schedule on mobile. Use the responsive API to configure a separate experience.  It works like configuring two sets of options that get applied based on the width of the screen. See it in action with this demo.

Updated and smarter themes

We refined the iOS, Material and Windows themes to be compatible with the latest guidelines. This includes updated styling, sizes, all the way to new interactions like a newly introduced quick navigation control.

We are shipping light and dark variants with an auto switching functionality. So it’s not the just the themes that can adapt to the platform, the theme variants will automatically change based on the system preferences. You can of course override all that and set the desired theme and variant.

The header, a new canvas

We are making the header customizable. You can see a couple of useful controls that you would normally expect from an event calendar, like the arrows to navigate the view, a button for quickly going to the current day and an indicator about the view that is usually the month and year. Besides simply hiding the header we are exposing an API that you can use to add custom functionality that makes sense for your use-case. Think resources that you can schedule, people from the team or color coded event categories.

Probably the highlight of the header is the quick navigation control. By clicking on the month you can easily zoom in & out on months/years to change the active view. In v4 navigating a couple of years out would have required much more clicks and swipes.

We are working hard on getting the advanced header customization capabilitites in your hand. At the moment you can turn the full header on & off. See it in action in any of the examples.

Templates for customizing how the events look

The event calendar provides various ways to render the events. You have the basic fields like date and time, title, duration and color printed out. This all is useful for a generic use-case, but most of the time there is extra information you might want to display.

We will be supporting three methods to customize how the events look:

• For overriding the events in their entirety you can set up an event template and create a fully custom way to show the event data. Use the data fields to print the time, title, description and format them how you would like it.
• You can leave the color and time formatting to Mobiscroll and set up an event data template that only controls how things like title, description, location and any custom fields are printed.
• You can fully decouple the event listing from the event calendar and use other components or implement your own listing.

The full override and means to decouple the event rendering are already supported, while the partial formatting and event data template is in development.

A new way to work with recurring events

Recurring events can be set up wit the help of the recurring setting under the event data as an object or an RRULE string. It supports daily, weekly, monthly and yearly recurring rules. Multiple occurrence and stopping rules are supported and more will be added with upcoming releases. We have also built an interactive configurator for generating objects and RRULE strings that you can use for learning and copy pasting.

Three building blocks

Besides the new Scheduler, the event calendar received a full makeover. We made the API simpler and cleaned up the UI. We have also broken up the event calendar product suite into the Calendar view, Agenda and Scheduler. That means you will still be able to combine them, however their functionality and feature sets have grown in such a manner that it makes sense to talk about them as stand-alone components. We are working on organizing the demos and documentation accordingly.

Real Angular and React components

One of the major things we changed is how we write code internally. The components are sharing a common core containing the component logic, and on top of that we add the view templates in each frameworks format. In case of the jQuery and Javascript components we re-use the React views and render them using Preact (a small footprint React-like virtual DOM library). This architecture lets us ship real Angular and React components. Moving away from the wrapper approach also opens up possibilities for adding full support for new frameworks like Vue or React native and improve performance along the way.

Dynamic options with global update

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.

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.

Next steps

We are already working on the second beta, refining the scheduler, event calendar and agenda while adding more components, writing demos and educational content for v5. There are customer already using the beta, so we are inviting you to give it a go. There is no trial available for v5 at the moment, but if you own licenses for the Event Calendar product family or Framework and Complete licenses with an active maintenance you can start using it right away.

Compared to previous betas we are approaching this one a little differently. As you can see we are not waiting to have all components and functionality in v5 available. This way we can move quicker and can get new and refined products in your hands faster.

Looking forward to making this the best Event Calendar and Responsive UI Library with you along the way.