--- title: "JQuery Scheduler Limit Overlapping Events Example | Mobiscroll" component: "Scheduler" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/scheduler/control-number-of-concurrently-shown-events" --- # Limit Overlapping Events - jQuery Scheduler demo Set a max count or auto-fit overlapping events to available space in the JQuery Scheduler — useful for appointment-heavy views. For jQuery or jQuery Mobile. - [Live demo](https://demo.mobiscroll.com/jquery/scheduler/control-number-of-concurrently-shown-events) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/scheduler/control-number-of-concurrently-shown-events) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/control-number-of-concurrently-shown-events.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/control-number-of-concurrently-shown-events.md), [React](https://demo.mobiscroll.com/react/scheduler/control-number-of-concurrently-shown-events.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/control-number-of-concurrently-shown-events.md) ## Description 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`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) 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; ## What this demo shows - A desktop weekly scheduler layout with a fixed week strip at the top and a scrollable scheduler time grid for the selected week. - **View selection** A configuration panel next to the scheduler lets users switch between `Day view` and `Week view`, with week view selected by default. - **Label count options** Below the segmented controls, an option list is shown from which users can choose between: `Show all event` (will display all concurrent events), `Show up to (a specified maximum number of) labels` (specify the maximum number of events shown), or `Events depending on available space` (showing as many events as fit). - **Default label behavior** `Show all event` is selected by default, so all concurrent events are displayed. - **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected week. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **More events popover** When the visible label count is limited, hidden events are collapsed behind a `+X` label, where `X` is the number of hidden events. - **Popover interaction** Clicking the `+X` label opens a popover that lists the hidden events for that time period. - **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Healthcare scheduling** Managing doctor appointments, consultations, and overlapping patient visits across multiple practitioners or rooms. - **Field service and maintenance planning** Coordinating technician schedules, service calls, and on-site appointments when multiple jobs can happen at the same time. - **Educational institutions** Organizing class schedules, office hours, tutoring sessions, and resource bookings throughout the week. ## Tutorial - ( ) Day view - (x) Week view - ( ) Show all events - (x) Show up to `3` labels - ( ) Events depending on available space ```js $('#my-calendar').mobiscroll().eventcalendar({ view: { scheduler: { maxEventStack: 3, type: 'week' } } }); ``` With "Day view": ```js $('#my-calendar').mobiscroll().eventcalendar({ view: { scheduler: { maxEventStack: 3, type: 'day' } } }); ``` With "Show all events": ```js $('#my-calendar').mobiscroll().eventcalendar({ view: { scheduler: { maxEventStack: 'all', type: 'week' } } }); ``` With "Events depending on available space": ```js $('#my-calendar').mobiscroll().eventcalendar({ view: { scheduler: { maxEventStack: 'auto', type: 'week' } } }); ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option - [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option - [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option - [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option - [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option - [`eventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-eventDelete) - option - [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-data) - option ## Code ### JS ```js $(function () { mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); var day = now.getDate(); $('#demo-more-events') .mobiscroll() .eventcalendar({ clickToCreate: true, dragToCreate: true, dragToMove: true, dragToResize: true, eventDelete: true, view: { scheduler: { allDay: false, maxEventStack: 2, type: 'week', }, }, data: [ { title: 'Employment (Semi-weekly)', start: '09:30', end: '11:00', recurring: 'FREQ=WEEKLY;BYDAY=WE', color: '#228c73' }, { title: 'Product team mtg.', start: '10:00', end: '12:00', recurring: 'FREQ=WEEKLY;BYDAY=FR', color: '#913aa7' }, { title: 'Football training.', start: '20:00', end: '22:00', recurring: 'FREQ=WEEKLY;BYDAY=MO,TH', color: '#37bbe4' }, { title: 'Webinar', start: new Date(year, month, day - 1, 14), end: new Date(year, month, day - 1, 18), color: '#43be5f' }, { title: 'Solution Brainstorm', start: new Date(year, month, day - 1, 16), end: new Date(year, month, day - 1, 20), color: '#7456ca', }, { title: 'Pizza Night', start: new Date(year, month, day - 1, 17), end: new Date(year, month, day - 1, 19), color: '#d7be0d' }, { title: 'Status update meeting', start: new Date(year, month, day, 10), end: new Date(year, month, day, 14), color: '#00aabb', }, { title: 'Friends binge marathon', start: new Date(year, month, day, 10), end: new Date(year, month, day, 16), color: '#7bde83', }, { title: 'Mtg. with Martin', start: new Date(year, month, day, 11), end: new Date(year, month, day, 14), color: '#de3d83' }, { title: 'Road-to-Success Workshop', start: new Date(year, month, day, 12), end: new Date(year, month, day, 18), color: '#d64646', }, { title: 'Luke BD', start: new Date(year, month, day, 19), end: new Date(year, month, day, 23), color: '#37bbe4' }, { title: 'Clever Conference', start: new Date(year, month, day + 1, 8), end: new Date(year, month, day + 1, 14), color: '#a71111', }, { title: 'Board Meeting', start: new Date(year, month, day + 1, 12), end: new Date(year, month, day + 1, 16), color: '#cfc014', }, { title: 'Stakeholder mtg.', start: new Date(year, month, day + 1, 14), end: new Date(year, month, day + 1, 18), color: '#a144f6', }, ], }); }); ``` ### HTML ```html
``` ## Implementation notes - Use `view: { scheduler: { type: 'week', allDay: false, maxEventStack: 2 } }` - a weekly scheduler with the all-day row hidden. `maxEventStack: 2` limits visible concurrent events per time slot to 2; excess overlapping events are collapsed behind a "+N more" indicator. - `maxEventStack` accepts a number (hard cap) or `'auto'` (limit determined by available horizontal space). When using `'auto'`, set `minEventWidth` on the same `view.scheduler` object to control the minimum column width allocated per event; it defaults to 50 if omitted. - Define events as inline static data. Use `new Date(year, month, day ± N, hour)` offsets to anchor events relative to today, and RRULE strings (e.g., `recurring: 'FREQ=WEEKLY;BYDAY=MO,TH'`) for recurring events. ## Run it in your project 1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial). 2. Clone the repository: ``` git clone https://github.com/acidb/mobiscroll-demos-jquery.git ``` 3. If not installed yet, install the Mobiscroll CLI from NPM: ``` npm install -g @mobiscroll/cli ``` 4. Config Mobiscroll - open a terminal window in the root directory and run: ``` mobiscroll config jquery ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` npm run dev ``` On a trial, add `--trial` to the config command: `mobiscroll config jquery --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/jquery/getting-started/installation ## Related demos - Previous: [Custom Range View](https://demo.mobiscroll.com/jquery/scheduler/custom-range-view.md) - Configure the JQuery Scheduler with a custom date range view — let users pick any date span from a header range picker instead of fixed day. - Next: [Custom Date Range View](https://demo.mobiscroll.com/jquery/scheduler/display-multiple-days-weeks.md) - Configure the JQuery Scheduler with a custom range size — set a reference date to control rolling or fixed multi-period paging.