Event Data Structure
The event data structure for the calendar 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 part of theresourcesarray.timezone- The timezone where the event takes place. If specified, it takes precedence over the calendar's specifieddataTimezone.dragInTime- Specifies whether the event is movable in time. If set tofalsehas precedence over thedragInTimeoption of the calendar.resize- Specifies whether the event is resizable. If set tofalsehas precedence over thedragToResizeoption of the calendar.overlap- Specifies whether overlap is allowed on the event. If set tofalsehas precedence over 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 happens before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. It is not automatically rendered in case of the calendar view, but can be used in the custom template.bufferAfter- Defines a buffer time in minutes that happens after the end of the event. It is not automatically rendered in case of the calendar view, but can be used in the custom template.order- Specifies the order of the event in the event array. Has precedence over the default ordering rules.
Demo
{
// base properties
title: 'Product planning',
color: '#56ca70',
start: '2026-10-20T13:00',
end: '2026-10-20T14:00',
// 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 calendar and perform CRUD operations.
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import {
MbscCalendarEvent,
MbscEventcalendar,
MbscEventcalendarView,
MbscModule,
Notifications,
setOptions ,
} from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const now = new Date();
@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: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 13),
end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 14),
title: 'General orientation',
color: '#35bb5a',
},
];
myView: MbscEventcalendarView = { calendar: { labels: true } };
addEvent(): void {
const newEvent: MbscCalendarEvent = {
// Base properties
title: 'Product planning',
color: '#56ca70',
start: new Date(2018, 11, 21, 13),
end: new Date(2018, 11, 21, 14),
// 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" [view]="myView"></mbsc-eventcalendar>
</div>
</div>
</mbsc-page>
.mds-full-height {
height: 100%;
}
.mds-overflow-hidden {
overflow: hidden;
}