New release: Mobiscroll 5.0 Beta 2

What’s New

We’ve just shipped the second beta for Mobiscroll 5 with fixes and new capabilities. It tackles two main topics: customizing events and customizing the header .

All three components – the Calendar, Scheduler and Agenda – come with a predefined way of displaying events. While theming enables some degree of customization, how much is a calendar worth if it constraints you to only generic fields like title, date, time and length?

Customizing the header

We are shipping tools for customizing the header of the Calendar, Scheduler and Agenda. You can simply hide it, reorder the elements inside it, add custom components and enable new interactions.

You can now have integrated switching of views, event filtering, calendar groups, and so on.

Header component structure

A great example is event filtering based on owners. You might want to see the schedule of your team or explore them individually.


Resource filtering in the event calendar

Another great example is adding a view switcher component.


Switching views from the header

Event customization

In the second beta release we focused on providing ways to customize the events in the Calendar, Scheduler and Agenda.

There are two approaches for making the event listing custom. Content customization allows the custom display of event content while still providing the styling of event time and colors. Full customization gives complete control over the event display.

This feature integrates perfectly with the supported frameworks, accepting ng-template in Angular and render functions in React, allowing the usage of custom and third party components.

You can leave the positioning , color , date and time to Mobiscroll and you only customize the content.

A more advanced popup

We added fullscreen support for the Popup component on mobile devices and adaptive styling for a seamless multi-screen experience.

The buttons received a color treatment as well, supporting color presets. More details and learning resources to follow.

Read the full blog post

MOBISCROLL 5.0-beta2

Agenda

NEW

  • Added customization options to the agenda events. We added the renderEventContent and eventContentTemplate options to the already existing renderEvent and eventTemplate options to improve on the customizability. The new options will be helpful if you only want custom content and don’t want to bother with the basic look of the events.
  • Added customization options to the agenda header. The renderHeader and headerTemplate options can be used to provide a custom header. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.

Eventcalendar

NEW

  • Added customization options to calendar labels. You can use the renderLabelContent and labelContentTemplate options to provide only the label content, if you don’t need custom styling on the labels. You can use the renderLabel and labelTemplate options to fully customize the labels. In this case, you only get the positioning and everything else is up to you.
  • Added customization options to the agenda and popover events. We added the renderEventContent and eventContentTemplate options to the already existing renderEvent and eventTemplate options to improve on the customizability. The new options will be helpful if you only want custom content and don’t want to bother with the basic look of the events.
  • Added customization options to the eventcalendar header. The renderHeader and headerTemplate options can be used to provide a custom header to the calendar. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.

FIXED

  • We improved the sizing of the calendar for the Material theme.
  • Use the calendar SASS variables for calendar buttons and calendar popup colors as well.
  • We fixed the calculation of maximum displayed event labels to work correctly in Safari.
  • We fixed the label ordering inside calendar cells.

General

NEW

  • Created a type for the locale objects to help the addition of new languages.

FIXED

  • We improved the sizing of the calendar for the Material theme.
  • Use the calendar SASS variables for calendar buttons and calendar popup colors as well.
  • We fixed the calculation of maximum displayed event labels to work correctly in Safari.
  • We fixed the label ordering inside calendar cells.

Popup

NEW

  • We added the fullScreen option which is a shortcut to the width and height options to make the popup as large as possible.
  • We added default values to the maxWidth and maxHeight settings to improve on the look on large screens.
  • We added the color and variant options to the buttons API. The popup buttons can be passed the primary , secondary , etc… colors and the flat , outline and standard button variants.

FIXED

  • We fixed the styling of bottom popups in iOS to be more consistent with the native experience.

Scheduler

NEW

  • Added customization options to scheduler events. You can use the the renderScheduleEventContent and scheduleEventContentTemplate options to provide only the event content, and don’t want to bother with the styling. You can use the renderScheduleEvent and scheduleEventTemplate options to fully customize the events in the scheduler. In this case you will only get the positioning out of the box and you take care of everything else.
  • Added customization options to the header. The renderHeader and headerTemplate options can be used to provide a custom header. We also made public the basic building blocks of the default calendar header - the previous, next and today buttons along with the year/month navigation component - so they can be used in custom header implementations out of the box.
  • Added html support in the scheduler event titles.

FIXED

  • We fixed the schedule weekdays today styling in week view mode. It was not highlighted correctly after navigating back to the current week.
  • We improved on the navigate method of the schedule view, now it navigates to the specified time not just the specific day.

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.