--- title: "Angular Timeline Resource Properties Example | Mobiscroll" component: "Timeline" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/timeline/resource-data-structure" --- # Resource Properties - Angular Timeline demo Define resource properties on the Angular Timeline — set up nested groups, fixed rows, and per-resource drag, resize, and overlap controls. - [Live demo](https://demo.mobiscroll.com/angular/timeline/resource-data-structure) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/timeline/resource-data-structure) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/resource-data-structure.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/resource-data-structure.md), [React](https://demo.mobiscroll.com/react/timeline/resource-data-structure.md), [Vue](https://demo.mobiscroll.com/vue/timeline/resource-data-structure.md) ## Description The resource data structure for the scheduler is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like title, job ... - `id` - This is an id that can be referenced in the event [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - `name` - The name of the resource that will be printed at the top of the respective column - `color` - The color controls the default event color of the resource. Event colors can be specific above this. If the color is omitted the underlying events will inherit the default calendar color - `eventCreation` - This controls if events can be created or dropped onto this resource - `children` - Array of resource objects which will render as a child of the specified resource - `collapsed` - Defines the displayed state of the child resoruce group - `eventDragBetweenResources` - Specifies whether the events in the specified resource are movable across resources. If set to `false` has precedence over [`dragBetweenResources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragBetweenResources) option of the calendar. - `eventDragInTime` - Specifies whether the events in the specified resource are movable in time. If set to `false` has precedence over [`dragInTime`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragInTime) option of the calendar. - `eventResize` - Specifies whether the events in the specified resource are resizable. If set to `false` has precedence over [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) option of the calendar. - `eventOverlap` - Specifies whether the events in the specified resource are allowed to overlap. If set to `false` has precedence over [`eventOverlap`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventOverlap) option of the calendar. - `fixed` - Specifies whether the resource is fixed to the top. If set to `true`, the specified resource will stick to the top when scrolling. - `reorder` - Specifies whether the resource can be dragged and reordered. If set to `false` and the `resourceReorder` in view option is enabled , the specified resource cannot be dragged and reordered. ## What this demo shows - A desktop daily timeline where hours are arranged horizontally and a hierarchical resource tree arranged vertically on the left. - **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date. - **Day view** The strip below the header shows the selected days, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM. - **Resources** The left side shows expandable and collapsible resource groups, including parent groups and fixed resources at the top. - **Resource hierarchy** Nested resources are grouped under parent rows, such as Team 1, before listing individual resources. - **Resource template** Each resource header shows the resource name in bold with the role shown below in a muted style. - **Current time** A vertical blue line with a time label marks the current time. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event cards** Events are shown as colored cards with a left color stripe, a bold title, a description, and a bold time range. - **Date positioning** Events are positioned by their assigned resource and exact date range. - **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range. - **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources. ## Best for - **Resource-based schedules** Showing separate schedules for people, rooms, equipment, or other bookable resources in the same day view. - **Team planning** Comparing each resource's assigned events side by side while keeping the time axis shared across the timeline. - **Role-aware scheduling** Displaying extra resource details, such as job title or responsibility, directly in the resource header. - **Resource-specific behavior** Using base resource properties to control event color, creation, dragging, resizing, and overlap behavior per resource. - **Custom resource data** Extending resource objects with custom fields and rendering those fields in the scheduler header. ## Tutorial ```html ``` ```ts myResources = [{ //base properties fixed: true, id: "room", name: 'Main hall', // add any property you'd like' title: 'Conference room', }, { // base properties id: 'team', name: 'Team 1', eventCreation: false, children: [{ // base properties id: 1, name: 'Ryan', color: '#e20000', // add any property you'd like title: 'UX Designer', job: 'Apollo Project' }, { // base properties id: 2, name: 'Kate', color: '#60e81a', // add any property you'd like title: 'Product Developer', job: 'Yorick Project' }, { // base properties id: 3, name: 'John', color: '#3ba7ff', // add any property you'd like title: 'Data Analyst', job: 'Titus Project' }, { // base properties id: 4, name: 'Mark', color: '#e25dd2', // add any property you'd like title: 'Network Administrator', job: 'Yorick Project' }, { // base properties id: 5, name: 'Sharon', color: '#f1e920', // add any property you'd like title: 'Data Quality Manager', job: 'Apollo Project' }, { // base properties id: 6, name: 'Emma', color: '#1ac38d', // add any property you'd like title: 'Help Desk Specialist', job: 'Titus Project' }, { // base properties id: 7, name: 'Phil', color: '#1ac38d', // add any property you'd like title: 'UX Designer', job: 'Titus Project' }, { // base properties id: 8, name: 'Vic', color: '#1ac38d', // add any property you'd like title: 'Product Developer', job: 'Yorick Project' }, { // base properties id: 9, name: 'Pam', color: '#1ac38d', // add any property you'd like title: 'Help Desk Specialist', job: 'Apollo Project' }, { // base properties id: 10, name: 'Suzie', color: '#1ac38d', // add any property you'd like title: 'Data Analyst', job: 'Apollo Project' }, { // base properties id: 11, name: 'Nina', color: '#1ac38d', // add any property you'd like title: 'Network Administrator', job: 'Titus Project' }] }]; ``` ## 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 - [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option - [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option - [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - 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 { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular'; setOptions({ theme: 'ios', themeVariant: 'light' }); @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, MbscModule], }) export class AppComponent { myResources: MbscResource[] = [ { // Base properties id: 'team', name: 'Team 1', eventCreation: false, children: [ { // Base properties id: 1, name: 'Ryan', color: '#e20000', // Add any property you'd like title: 'UX Designer', job: 'Apollo Project', }, { // Base properties id: 2, name: 'Kate', color: '#60e81a', // Add any property you'd like title: 'Product Developer', job: 'Yorick Project', }, { // Base properties id: 3, name: 'John', color: '#3ba7ff', // Add any property you'd like title: 'Data Analyst', job: 'Titus Project', }, { // Base properties id: 4, name: 'Mark', color: '#e25dd2', // Add any property you'd like title: 'Network Administrator', job: 'Yorick Project', }, { // Base properties id: 5, name: 'Sharon', color: '#f1e920', // Add any property you'd like title: 'Data Quality Manager', job: 'Apollo Project', }, { // Base properties id: 6, name: 'Emma', color: '#1ac38d', // Add any property you'd like title: 'Product Tactics Agent', job: 'Titus Project', }, ], }, ]; myView: MbscEventcalendarView = { timeline: { type: 'day', }, }; myEvents: MbscCalendarEvent[] = [ { start: '2026-10-24T15:00', end: '2026-10-24T16:00', title: 'General orientation', resource: 1, }, { start: '2026-10-24T09:00', end: '2026-10-24T10:00', text: 'Stakeholder mtg.', resource: 2, }, { start: '2026-10-24T13:30', end: '2026-10-24T14:30', text: "Lunch @ Butcher's", resource: 5, }, ]; } ``` ### Template ```html
{{resource.name}}
{{resource.title}}
 ``` ### CSS ```css .md-resource-data-structure-title { font-size: 13px; opacity: 0.7; } ``` ## Implementation notes - Use `timeline: { type: 'day' }` - a single-day view. - Define one parent group resource (`id: 'team'`, `name: 'Team 1'`, `eventCreation: false`) with 6 child resources. Each child uses the standard base properties (`id`, `name`, `color`) plus two custom properties - `title` (job title) and `job` (project name) - demonstrating that arbitrary fields can be added to any resource object. Custom properties are passed through to the render layer and accessible in templates. - Add 3 events for today spread across different resource rows. - Implement a custom resource row renderer (`renderResource` / `resourceTemplate` / `resource` slot) that shows the resource `name` for all rows, and additionally shows `resource.title` in a smaller dimmed style for leaf (non-parent) rows. Use the `resource.isParent` boolean - injected automatically by Mobiscroll - to distinguish the group header row from individual member rows. ## 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 Sort](https://demo.mobiscroll.com/angular/timeline/dynamic-calculation-resource-sort.md) - Sort Angular Timeline resources by metrics — header popup ranks trucks by standby time, payload efficiency, or deadhead, with instant reorder on event changes. - Next: [Resource Hover Tooltip](https://demo.mobiscroll.com/angular/timeline/display-resource-information-on-hover.md) - Hover over a resource row in the Angular Timeline to open a tooltip popup with scheduled hours — keeps the timeline view clean.