--- title: "Angular Scheduler Dynamic Resource Widths Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/scheduler/dynamic-content-based-resource-width" --- # Dynamic Resource Widths - Angular Scheduler demo Adapt Angular Scheduler resource column widths dynamically — assign per-resource CSS classes so each column fits its header content. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/dynamic-content-based-resource-width) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/dynamic-content-based-resource-width) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/dynamic-content-based-resource-width.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/dynamic-content-based-resource-width.md), [React](https://demo.mobiscroll.com/react/scheduler/dynamic-content-based-resource-width.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/dynamic-content-based-resource-width.md) ## Description When resource content varies, fixed widths might not work well. To handle this, you can define a few preset width classes in CSS, and assign them conditionally using the `cssClass` property in the resource data based on the content. This approach lets you adapt the layout dynamically and ensure each resource column has the right width for its content. ## What this demo shows - A desktop weekly scheduler from Monday to Friday, with a fixed week strip, repeated resources for each day, and a vertically scrollable time grid running from 8 AM to 7 PM. - **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 strip**: The fixed strip below the header displays the days in the selected week, with the current date highlighted by a blue circle. - **Resources**: Each day repeats the same four resources: Adam Johnson, Hannah Williams, Charlie Smith, and Ethan Roberts. - **Resource details**: Each resource shows the resource name and a set of icons based on the resource data, such as role, office, vacation, or availability indicators. - **Resource columns**: Each resource column can use a different CSS-based width, so columns can adapt to the amount of content shown in the resource header. - **Time grid** The scheduler shows 11-hours range from 8 AM to 7 PM and can be scrolled vertically. - **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. - **Current time** A blue current-time line appears across the time grid. - **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 - **Resource headers with uneven content**: Useful when some resources need more visual details than others, such as extra status icons, role indicators, or availability markers. - **Role-based scheduling**: Fits schedules where each person or resource has a distinct role, status, or working condition that should be visible directly in the column header. - **Team availability planning**: Helps compare people, roles, and booked time across the same weekday range while keeping resource-specific context visible. - **Custom resource layouts**: Useful when resource columns need to be controlled through CSS classes instead of a single fixed width for every resource. ## 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 - [`cssClass`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-cssClass) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`groupBy`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-groupBy) - option - [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`resourceTemplate`](https://mobiscroll.com/docs/angular/eventcalendar/api#template-resourceTemplate) - template ## Code ### Component ```ts import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, Notifications, setOptions, } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light', }); interface MyResource extends MbscResource { role: string; inOffice: boolean; vacation: boolean; available: boolean; } @Component({ selector: 'app-root', templateUrl: './app.component.html', providers: [Notifications], standalone: true, imports: [CommonModule, MbscModule], }) export class AppComponent { constructor(private sanitizer: DomSanitizer) { for (const name of Object.keys(this.icons)) { const icon = this.icons[name]; icon.safeSvg = this.sanitizer.bypassSecurityTrustHtml(icon.svg); } } icons: Record = { office: { title: 'In office', svg: '', }, developer: { title: 'Developer', svg: '', }, designer: { title: 'Designer', svg: '', }, support: { title: 'Support', svg: '', }, vacation: { title: 'On holiday', svg: '', }, unavailable: { title: 'Not available', svg: '', }, }; myEvents: MbscCalendarEvent[] = [ { id: 1, resource: 1, title: 'Bug Fix', start: '2026-10-23T09:15', end: '2026-10-23T10:45', }, { id: 2, resource: 3, title: 'API Integration', start: '2026-10-23T09:00', end: '2026-10-23T11:00', }, { id: 3, resource: 4, title: 'Ticket Resolution', start: '2026-10-23T12:30', end: '2026-10-23T15:00', }, { id: 4, resource: 3, title: 'Code Optimization', start: '2026-10-23T15:30', end: '2026-10-23T17:15', }, // Showing partial data. Download full source. ]; myResources: MyResource[] = [ { id: 1, name: 'Adam Johnson', color: '#328e39', role: 'developer', inOffice: true, vacation: false, available: false, cssClass: 'mds-variable-res-col-large', }, { id: 2, name: 'Hannah Williams', color: '#00aabb', role: 'designer', inOffice: false, vacation: true, available: true, cssClass: 'mds-variable-res-col-medium', }, { id: 3, name: 'Charlie Smith', color: '#28B372.', role: 'developer', inOffice: true, vacation: false, available: true, cssClass: 'mds-variable-res-col-medium', }, { id: 4, name: 'Ethan Roberts', color: '#ff5733', role: 'support', inOffice: false, vacation: false, available: true, cssClass: 'mds-variable-res-col-small', }, ]; myView: MbscEventcalendarView = { scheduler: { type: 'week', startDay: 1, endDay: 5, startTime: '08:00', endTime: '19:00', allDay: false }, }; getIcons(resource: MyResource) { const resourceIcons = []; resourceIcons.push(this.icons[resource.role]); if (resource.inOffice) { resourceIcons.push(this.icons['office']); } if (resource.vacation) { resourceIcons.push(this.icons['vacation']); } if (!resource.available) { resourceIcons.push(this.icons['unavailable']); } return resourceIcons; } } ``` ### Template ```html
{{ resource.name }}
 ``` ### CSS ```css .mds-variable-res-col-small { width: 70px; } .mds-variable-res-col-medium { width: 100px; } .mds-variable-res-col-large { width: 130px; } .mds-variable-res-col-name { height: 40px; font-size: 14px; } .mds-variable-res-col-icons { padding-top: 8px; } .mds-variable-res-col-icon { display: inline-block; vertical-align: middle; margin: 0 8px; fill: currentColor; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'week', allDay: false, startDay: 1, endDay: 5, startTime: '08:00', endTime: '19:00' } }` - Mon-Fri, 8am-7pm, no all-day row. Set `groupBy: 'date'`. - Define 4 resources. Each resource has `id`, `name`, `color`, plus three boolean status flags (`inOffice`, `vacation`, `available`) and a `role` string (`'developer'`, `'designer'`, `'support'`). Assign a `cssClass` to each resource (`mds-variable-res-col-small`, `mds-variable-res-col-medium`, or `mds-variable-res-col-large`) based on how many status icons that resource will display. Define matching CSS rules that set the column width for each class. - Define a large set of inline events (90+) with relative today dates, each assigned to a single resource. - Pass a custom resource renderer to `renderResource` (Angular: `resourceTemplate`, Vue: `#resource` slot). The renderer builds an icon list from the resource's properties: always include the role icon; add an office icon if `inOffice` is true; add a vacation icon if `vacation` is true; add an unavailable icon if `available` is false. Render the resource name and the assembled icon list. ## 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: [Dynamic Resource Filtering](https://demo.mobiscroll.com/angular/scheduler/dynamic-add-remove-resources-filter.md) - Show or hide resources in a Angular Scheduler at runtime using a checklist — filter people, teams, or rooms without changing event data. - Next: [Multi-Resource Configuration](https://demo.mobiscroll.com/angular/scheduler/resource-data-structure.md) - Configure multiple resources in a Angular Scheduler — assign ID, name, and color, and set per-resource rules for event drag, resize, and overlap.