New release: Mobiscroll 5.0 Beta 2

Announcements
1

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.

1996×764 41.9 KB

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.

Scheduler%20and%20Agenda%20custom%20event
Scheduler%20and%20Agenda%20custom%20event1216×1000 270 KB

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

Agenda%20and%20Calendar%20custom%20event%20contetnt
Agenda%20and%20Calendar%20custom%20event%20contetnt1218×704 222 KB

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.

2

This looks very good. If I had known you guys were making big improvements to the scheduler I wouldn’t have spent $2500 on Syncfusion. :slightly_frowning_face:

With your scheduler can I specify a “first day of the week”? And is there a “work week” view and can I define which days constitute a work week"?

3

Awesome to hear you like it!

First day of the week is coming from the locale settings, but of course it can be overwritten. As for the “work week”, if I am not mistake there is/will work happen around disabled days, so you could have something like Sat and Sun disabled.

Do you have a five day view in mind? Can you share about the use-case?

4

I want to use it for a dog grooming system and some groomers will have a five day work week, others a six day or a seven day work week. I’d like to have the option to only display the days they are open, whether that be Monday to Friday or Monday to Saturday or even Tuesday to Saturday. Some businesses I know are closed Sundays and Mondays, so there’s really no standard which is why I’d like to be able to customize it.

So when you say “disabled” I’m hoping that means I can simply hide the disabled days, rather than show them in a disabled state.

5

Hello @Vincent_Wansink :wave:

Following up in this thread with some good news :wink:

We just released Mobiscroll 5.1. which includes a brand new feature in which you were interested.
You wanted to show a work week view for the Scheduler: Scheduler Work calendar Example | Mobiscroll - we created a demo for that.

Let me know if this is what you need.

You can download the latest version from: https://download.mobiscroll.com.
If you were using the CLI or installed from npm, an npm update will do the job as well.

1 Like
6

I love it! Thank you for reminding me of this. I’ll download the latest version as soon as I get a chance. Your calendar controls just keep getting better and better!

Although I am having some issues with the v5 date picker but I’ll start a new thread for that.

1 Like