Event Data Structure
The event data structure for the timeline 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 location, description ...
id- A unique ID for the event. If not specified a unique id will be generatedtitle- Defines the event text. This can be plaintext or HTMLtooltip- Defines the text for the tooltip which appears on mouse hover. If not specified, it will show the title and the start/end times of the event.color- Defines the event colorstart- Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. Learn about date formatsend- Sets the end date and time for the event. The same formats are supported as forstartallDay- Configures the event as a full-day eventrecurring- Configures the recurring rules for the event. Learn about recurring eventsrecurringException- Represents the exceptions of a recurring event, when specific dates need to be skipped from the rule.recurringExceptionRule- Represents the exception rule of a recurring event, when recurring dates need to be skipped from the rule.resource- Links the event to one or more resources. Expects a list of IDs from theresourcesarrayslot- Links the event to a slot. Expects an ID from theslotsarraytimezone- The timezone where the event takes place. If specified, it takes precedence over the calendar's specifieddataTimezone.dragBetweenResources- Specifies whether the event is movable across resources. If set tofalsehas precedence overeventDragBetweenResourcesproperty inresourcesand thedragBetweenResourcesoption of the calendar.dragInTime- Specifies whether the event is movable in time. If set tofalsehas precedence overeventDragInTimeproperty inresourcesand thedragInTimeoption of the calendar.resize- Specifies whether the event is resizable. If set tofalsehas precedence overeventResizeproperty inresourcesand thedragToResizeoption of the calendar.overlap- Specifies whether overlap is allowed on the event. If set tofalsehas precedence overeventOverlapproperty inresourcesand theeventOverlapoption of the calendar.editable- Denotes if the event is editable. If setfalse, the event cannot be dragged, resized or deleted even if globally enabledcssClass- A custom css class for the event. Useful for quick styling adjustments of the event container.bufferBefore- Defines a buffer time in minutes that will be rendered before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in before a flight.bufferAfter- Defines a buffer time in minutes that will be rendered after the end of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time after meetings/appointments, check out after flights, inspection, cleaning after certain tasks.order- Specifies the order of the event in the event array. Has precedence over the default ordering rules.
Demo
{
// base properties
title: 'Product planning',
start: '2026-10-21T15:00',
end: '2026-10-21T17:00',
resource: 4,
bufferBefore: 20,
bufferAfter: 30,
// add any property you'd like
busy: true,
description: 'Weekly meeting with team',
location: 'Office',
}Now that you know how the event object is structured you can easily load an array of events into the timeline and perform CRUD operations.
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import {
MbscCalendarEvent,
MbscEventcalendar,
MbscEventcalendarView,
MbscModule,
MbscResource,
Notifications,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
@ViewChild('calendar', { static: false })
calendar!: MbscEventcalendar;
myEvents: MbscCalendarEvent[] = [
{
start: '2026-10-21T11:00',
end: '2026-10-21T13:00',
title: 'General orientation',
resource: 2,
bufferBefore: 20,
bufferAfter: 30,
},
];
myResources: MbscResource[] = [
{ id: 1, name: 'Resource A', color: '#fdf500' },
{ id: 2, name: 'Resource B', color: '#ff0101' },
{ id: 3, name: 'Resource C', color: '#01adff' },
{ id: 4, name: 'Resource D', color: '#239a21' },
{ id: 5, name: 'Resource E', color: '#ff4600' },
];
myView: MbscEventcalendarView = { timeline: { type: 'day' } };
addEvent(): void {
const newEvent: MbscCalendarEvent = {
// Base properties
title: 'Product planning',
start: '2026-10-21T15:00',
end: '2026-10-21T17:00',
resource: 4,
bufferBefore: 20,
bufferAfter: 30,
// Add any property you'd like
busy: true,
description: 'Weekly meeting with team',
location: 'Office',
};
this.myEvents = [...this.myEvents, newEvent];
this.calendar.navigateToEvent(newEvent);
this.notify.toast({
message: 'Event added',
});
}
}
<mbsc-page class="mds-full-height">
<div class="mds-full-height mbsc-flex-col">
<div class="mbsc-flex-none">
<mbsc-button (click)="addEvent()" startIcon="plus">Add event to calendar</mbsc-button>
</div>
<div class="mds-overflow-hidden mbsc-flex-1-1">
<mbsc-eventcalendar #calendar [data]="myEvents" [resources]="myResources" [view]="myView"></mbsc-eventcalendar>
</div>
</div>
</mbsc-page>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}