Limit Overlapping Events

The scheduler renders all concurrent (overlapping) events by default, and the available horizontal space will be divided between them. When there are a lot of concurrent events, displaying all of them isn't always helpful.

A maximum number of concurrent events can be set by passing a number to the maxEventStack property of the view.scheduler option.

Alternatively maxEventStack: 'auto' can also be set, in this case the value will be determined automatically, based on the available horizontal space. It's poosible to also set a minimum event width, using the minEvenWidth property of the view.scheduler option. If not specified, it defaults to 50px;

Download and try example

Demo

Javascript jQuery Angular React Vue 
$('#my-calendar').mobiscroll().eventcalendar({
    view: {
        scheduler: {
            maxEventStack: 3,
            type: 'week'
        }
    }
});
Set a max count or auto-fit overlapping events to available space in the Scheduler — useful for appointment-heavy views.

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.