--- title: "Angular Timeline Limit Concurrent Events Example | Mobiscroll" component: "Timeline" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/timeline/control-number-of-concurrently-shown-events" --- # Limit Concurrent Events - Angular Timeline demo Set a maximum number of concurrent events on a Angular Timeline — cap overlapping events per row and show an overflow indicator for hidden events. For Angular 22 and Ionic 8. - [Live demo](https://demo.mobiscroll.com/angular/timeline/control-number-of-concurrently-shown-events) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/control-number-of-concurrently-shown-events) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/control-number-of-concurrently-shown-events.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/control-number-of-concurrently-shown-events.md), [React](https://demo.mobiscroll.com/react/timeline/control-number-of-concurrently-shown-events.md), [Vue](https://demo.mobiscroll.com/vue/timeline/control-number-of-concurrently-shown-events.md) ## Description The timeline renders all concurrent (overlapping) events by default, and the height of the resource row will increase to fit those events. If equal row height is used, the available vertical 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.timeline`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) option. ## What this demo shows - A desktop weekly timeline layout with days arranged horizontally and resources listed vertically on the left. - **Daily summary option** A configuration panel next to the timeline lets users enable or disable daily event summaries. The option is enabled by default. - **Label count options** The configuration panel includes label display options for showing all events or limiting the number of visible labels. - **Default label behavior** The demo uses the limited label option by default, with the maximum number of visible labels set to `2`. - **Header navigation** The month and year label opens date navigation, while the previous and next arrows and the Today button move between weeks or return to the current day. - **Week view** A fixed strip below the header shows the selected week using the `DD DDD MMM YYYY` date format, with the current date highlighted. - **Resources** The left side of the timeline shows four resources. - **Events** Events appear as colored labels with the job name shown in bold. - **Event positioning** Events are placed by assigned resource and by start and end date. - **Event interaction** Events highlight on hover and expose drag and resize handles for moving events or changing their duration. - **Event selection** Clicking an event selects and highlights it. - **More events indicator** When the visible label count is limited, hidden events are collapsed behind an `X more` label, where `X` is the number of hidden events. - **More events popover** Clicking the `X more` label opens a popover that lists the hidden events. - **Scrolling** The timeline supports both vertical and horizontal scrolling for navigating the timeline view. ## Best for - **Healthcare** Managing doctor appointments, consultations, and overlapping patient visits across multiple practitioners or rooms. - **Field service planning** Coordinating technician schedules, service calls, and on-site appointments when multiple jobs can overlap. - **Education scheduling** Organizing classes, office hours, tutoring sessions, and resource bookings across a weekly timeline. ## Tutorial - [x] Show a daily summary of events - ( ) Show all events - (x) Show up to `2` labels ```html ``` With "Show all events": ```html ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); const day = now.getDate(); @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, MbscModule], }) export class AppComponent { myEvents: MbscCalendarEvent[] = [ { title: 'Product team mtg.', start: '10:00', end: '14:00', recurring: 'FREQ=WEEKLY;BYDAY=MO', color: '#913aa7' }, { title: 'Employment (Semi-weekly)', start: '11:00', end: '17:00', recurring: 'FREQ=WEEKLY;BYDAY=WE', color: '#228c73' }, { title: 'Pizza Night', start: '16:00', end: '22:00', recurring: 'FREQ=WEEKLY;BYDAY=FR', color: '#d7be0d' }, // Resource 1 { title: 'Board Meeting', start: new Date(year, month, day + 1, 8), end: new Date(year, month, day + 1, 16), color: '#cfc014', resource: 1, }, { title: 'Stakeholder mtg.', start: new Date(year, month, day + 1, 8), end: new Date(year, month, day + 1, 18), color: '#a144f6', resource: 1, }, // Resource 1, 2 { title: 'Clever Conference', start: new Date(year, month, day - 2, 10), end: new Date(year, month, day - 2, 18), color: '#a71111', resource: [1, 2], }, { title: 'Clever Conference', start: new Date(year, month, day - 1, 10), end: new Date(year, month, day - 1, 18), color: '#a71111', resource: [1, 2], }, { title: 'Clever Conference', start: new Date(year, month, day, 10), end: new Date(year, month, day, 18), color: '#a71111', resource: [1, 2], }, { title: 'Clever Conference', start: new Date(year, month, day + 1, 10), end: new Date(year, month, day + 1, 18), color: '#a71111', resource: [1, 2], }, { title: 'Clever Conference', start: new Date(year, month, day + 2, 10), end: new Date(year, month, day + 2, 18), color: '#a71111', resource: [1, 2], }, // Resource 3 { title: 'Webinar', start: new Date(year, month, day - 1, 8), end: new Date(year, month, day - 1, 16), color: '#43be5f', resource: 3 }, { title: 'Solution Brainstorm', start: new Date(year, month, day - 1, 12), end: new Date(year, month, day - 1, 20), color: '#7456ca', resource: 3, }, // Resource 4 { title: 'Status update meeting', start: new Date(year, month, day, 8), end: new Date(year, month, day, 14), color: '#00aabb', resource: 4, }, { title: 'Friends binge marathon', start: new Date(year, month, day, 6), end: new Date(year, month, day, 16), color: '#7bde83', resource: 4, }, { title: 'Mtg. with Martin', start: new Date(year, month, day, 10), end: new Date(year, month, day, 14), color: '#de3d83', resource: 4, }, { title: 'Road-to-Success Workshop', start: new Date(year, month, day, 8), end: new Date(year, month, day, 18), color: '#d64646', resource: 4, }, // Resource 3, 4 { title: 'Business of Software Conference', start: new Date(year, month, day - 3, 10), end: new Date(year, month, day - 3, 18), color: '#ff6d42', resource: [3, 4], }, { title: 'Business of Software Conference', start: new Date(year, month, day - 2, 10), end: new Date(year, month, day - 2, 18), color: '#ff6d42', resource: [3, 4], }, { title: 'Business of Software Conference', start: new Date(year, month, day - 1, 10), end: new Date(year, month, day - 1, 18), color: '#ff6d42', resource: [3, 4], }, { title: 'Business of Software Conference', start: new Date(year, month, day, 10), end: new Date(year, month, day, 18), color: '#ff6d42', resource: [3, 4], }, ]; myResources: MbscResource[] = [ { id: 1, name: 'Jude Chester' }, { id: 2, name: 'Natalie Racquel' }, { id: 3, name: 'Jon Drake' }, { id: 4, name: 'Meredith Chantelle' }, ]; myView: MbscEventcalendarView = { timeline: { maxEventStack: 2, type: 'week', resolutionHorizontal: 'day', eventDisplay: 'fill', }, }; } ``` ### Template ```html ``` ## Implementation notes - Set `timeline: { type: 'week', resolutionHorizontal: 'day', eventDisplay: 'fill', maxEventStack: 2 }` under the `view` option. `maxEventStack: 2` caps the number of concurrent events shown per resource row to 2; any additional overlapping events are hidden (Mobiscroll shows a "+N more" indicator). Remove or increase the value to allow more stacked rows. - Define 4 people resources without a `color` property - event colors are set per-event instead. - Build the event dataset so that concurrent overlaps are visible: assign multiple overlapping timed events to the same resource on the same day (e.g. 08:00-16:00 and 08:00-18:00 on Resource 1; four overlapping events on Resource 4 on today's date). This makes the `maxEventStack` cap immediately visible. - Use recurring events (RRULE string in the `recurring` field, e.g. `'FREQ=WEEKLY;BYDAY=MO'`) without a `resource` field to create week-spanning background events that appear on all resource rows. - Assign an event to multiple resources simultaneously by setting `resource` to an array of IDs (e.g. `resource: [1, 2]`). The event appears as a separate block in each listed resource row. - Use JavaScript `Date` offsets relative to today (`new Date(year, month, day - 1, ...)`) so overlapping events always fall around the current date and remain visible on load. ## 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-angular.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 angular ``` 5. Install dependencies - open a terminal window in the root directory and run: ``` npm install ``` 6. Run the project: ``` ng serve ``` On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`. Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/angular/getting-started/installation ## Related demos - Previous: [Calendar Zoom Levels](https://demo.mobiscroll.com/angular/timeline/calendar-zoom.md) - Add zoom controls to a Angular resource timeline to switch from day/hour detail to monthly/yearly overviews— keeping events centered as the view changes. - Next: [Event Buffer Time](https://demo.mobiscroll.com/angular/timeline/event-buffer.md) - Visualize buffer time on a Angular Timeline — show travel time, check-in/out, loading/unloading time, or preparation windows around scheduled events.