Resource Properties
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 eventdataname- The name of the resource that will be printed at the top of the respective columncolor- 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 coloreventCreation- This controls if events can be created or dropped onto this resourcechildren- Array of resource objects which will render as a child of the specified resourcecollapsed- Defines the displayed state of the child resoruce groupeventDragBetweenResources- Specifies whether the events in the specified resource are movable across resources. If set tofalsehas precedence overdragBetweenResourcesoption of the calendar.eventDragInTime- Specifies whether the events in the specified resource are movable in time. If set tofalsehas precedence overdragInTimeoption of the calendar.eventResize- Specifies whether the events in the specified resource are resizable. If set tofalsehas precedence overdragToResizeoption of the calendar.eventOverlap- Specifies whether the events in the specified resource are allowed to overlap. If set tofalsehas precedence overeventOverlapoption of the calendar.fixed- Specifies whether the resource is fixed to the top. If set totrue, the specified resource will stick to the top when scrolling.reorder- Specifies whether the resource can be dragged and reordered. If set tofalseand theresourceReorderin view option is enabled , the specified resource cannot be dragged and reordered.
Demo
html<mbsc-eventcalendar [resources]="myResources"></mbsc-eventcalendar>
tsmyResources = [{
//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'
}]
}];
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscCalendarEvent, MbscEventcalendarView, MbscModule, MbscResource, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@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,
},
];
}
<mbsc-eventcalendar [view]="myView" [data]="myEvents" [resources]="myResources" [resourceTemplate]="resourceTemp">
<ng-template #resourceTemp let-resource>
<div>{{resource.name}}</div>
<div *ngIf="!resource.isParent" class="md-resource-data-structure-title">{{resource.title}}</div>
</ng-template>
</mbsc-eventcalendar>
.md-resource-data-structure-title {
font-size: 13px;
opacity: 0.7;
}