Excited to add more customization to Mobiscroll through cell and date-time range background, invalids, events and timeline day headers. Besides that we are happy to show you how you can simply and elegantly add search to your event calendar views.

Customizing cell & range backgrounds along with invalids

Setting the background color for time ranges in the scheduler and timeline help with adding meaning to certain parts of the day or even full days. You can make it more descriptive by adding labels and also with the new cssClass property of the color and invalid objects you can print patterns and apply individual styling to every section or invalid range.

Take a look at how you can do it in case of the scheduler and timeline view.

cssClass property for events

In a similar fashion to the cssClass that has been added to the color and invalid objects, you can now specify a custom css class for every event apart. This might be useful in cases where you don’t want to write a custom template, or you want to do something like change the width of certain events in the scheduler. This new property of the event data is applied to all event calendar views.

Customizing the day header in the Timeline

We are introducing templating for the day header of the timeline view. Previously available only for the scheduler, you are now able to customize the format and content of the cells that hold the days at the top of the view. Use it to show contextual and relevant information that is tied to the day eg. statistics, summaries, task load, totals or just color the background based on the number of events happening on that day.

Take a look how to alter the day header in real-time or show project totals like total revenue made.

Timeline event interaction UX improvements

We are continuously iterating on the UX and are re-evaluating how things should work based on how people are using the components. We have made a nice improvement to the timeline view where events stay in their own track when someone interacts with them rather than jumping to the top of the resource row.

Implementing event search

Being able to look for events is a common requirement that comes up in a lot of situations. Search can be implemented a couple of different ways, but one of the most frequently seen is having an API endpoint that expects the search term and returns the relevant events. This can be as simple as matching a substring agains the title of the event or as complex as needed. The actual even lookup is external to event calendar and happens on the server-side, but the tools to present the results in an elegant way are all Mobiscroll.

We have built a couple of demos that either use a two pane layout where the search input and results are rendered to the left-side of the calendar or a simple search input embedded into the calendar header. In both cases we are using an agenda instance to present the results either inline or in a pop-over/dropdown. Both solutions look great and are efficient, elegant and can be simply implemented.

Check out the calendar view with pop-over search and with search in a sidebar, or give the scheduler, agenda and timeline demos a look.

What’s next

We are working on making Mobiscroll ready for Vue along with features that will help in planning long-term projects with the timeline view.

For a full list of changes check out the release notes and download the latest version.

Illustration by Icons 8 from Ouch!