JavaScript Scheduler Group by Resource or Date

Resources show up in the header of the calendar as the primary group and below them are the days. This can be switched up through the groupBy option that expects 'resource' or 'day'.

Combined with the day and week-view you can help people quickly find what they are looking for. Learn how to add an integrated segmented control to the header.

Download and try example

Demo

Group by
Calendar view
Javascript jQuery Angular React Vue 
mobiscroll.eventcalendar('#mycalendar', {
    view: {
        scheduler: { type: 'week' }
    },
    groupBy: 'resource',
    resources: [{
        id: 1,
        name: 'Ryan',
        color: '#f7c4b4'
    }, {
        id: 2,
        name: 'Kate',
        color: '#c6f1c9'
    }, {
        id: 3,
        name: 'John',
        color: '#e8d0ef'
    }]
});
Preview in fullscreen
Group resources or days as the primary view in the Scheduler and toggle between layouts using the built-in segmented control.

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.