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, so let’s jump in.

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 events

Every great tool needs to enable creativity and give you superpowers to make your vision a reality. This is what we are doing with the newly introduced event content customization and full event customization options.

With the reworked architecture of Mobiscroll and the fact that we are shipping real React and Angular components, it is possible to use the framework capabilities like templating in case of Angular and render functions in case of React to define the custom events. jQuery and Javascript uses render functions as well.

Full event customization vs event content customization

There are two approaches for making the event listing custom. 

You can fully take over the rendering of the labels (inside the calendar), event list items (calendar popover and agenda), schedule items (scheduler) and let Mobiscroll only take care of correctly positioning them.

This can be done with the labelTemplate, eventTemplate, scheduleEventTemplate (Angular) & renderLabel, renderEvent, renderScheduleEvent (React, jQuery and Javascript). Learn more about these options in the documentation and play around with the calendar, scheduler and agenda examples.

Or you can leave the positioning, color, date and time to Mobiscroll and you only customize the content. It is more or less the same idea as the full event customization, however it does one big thing differently. It takes care of rendering every aspect of the event except the content. Saves a lot of code if the base look and feel works and you only need slight customization.

Use the labelContentTemplate, eventContentTemplate, scheduleEventContentTemplate (Angular) & renderLabelContent, renderEventContent, renderScheduleEventContent (React, jQuery and Javascript). Check out the documentation for more information and see the calendar popover and agenda in action.

In both cases you will be able to add custom components, interactions and style the base fields or any custom field you would like to display.

Customizing the header

Easily manipulate what shows up in the header or completely hide it. You can reorder and style the predefined components – quick navigation, today button and previous, next arrows – and add custom components.

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

Another great example is adding a view switcher component.

If you need more screen real estate, you can always implement it externally.

For customizing the header use the headerTemplate (Angular) and the renderHeader (React, jQuery and Javascript) options. You can learn more about it in the documentation.

Next steps

We’re looking forward to the next couple of betas where we’ll be tackling drag & drop for event creation, scheduling and resizing. We’re also making progress towards the launch of the date pickers, so stay tuned.

Besides that we are already planning the first stable release of the Event calendar, scheduler and agenda components, which means when everything is ironed out we’ll be ready to pull the trigger.

A quick note on Mobiscroll 4… we are continuously maintaining and taking care of v4 as well, in fact we are preparing a new release at the time of writing, so rest assured it will get all the love it needs.

Share your experience with us and let us know what you’re looking forward to the most.