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?
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.
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
scheduleEventTemplate (Angular) &
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.
scheduleEventContentTemplate (Angular) &
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
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.