---
title: "Angular Event calendar Event Data Structure Example | Mobiscroll"
component: "Event calendar"
framework: "Angular"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/angular/eventcalendar/event-data-structure"
---

# Event Data Structure - Angular Event calendar demo

Define event objects in a Angular event calendar — set title, start, end, color, recurring rules, per-event drag and resize, and custom fields. For Angular 22 and Ionic 8.

- [Live demo](https://demo.mobiscroll.com/angular/eventcalendar/event-data-structure)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/calendar-view/event-data-structure)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/event-data-structure.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/event-data-structure.md), [React](https://demo.mobiscroll.com/react/eventcalendar/event-data-structure.md), [Vue](https://demo.mobiscroll.com/vue/eventcalendar/event-data-structure.md)

## Description

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 generated
- `title` - Defines the event text. This can be plaintext or HTML
- `tooltip` - 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 color
- `start` - 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 formats](https://demo.mobiscroll.com/angular/eventcalendar/date-object-ISO-8601-moment)
- `end` - Sets the end date and time for the event. The same formats are supported as for `start`
- `allDay` - Configures the event as a full-day event
- `recurring` - Configures the recurring rules for the event. [Learn about recurring events](https://demo.mobiscroll.com/angular/eventcalendar/recurring-events)
- `recurringException` - 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 the [`resources` array](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources).
- `timezone` - The timezone where the event takes place. If specified, it takes precedence over the calendar's specified [`dataTimezone`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dataTimezone).
- `dragInTime` - Specifies whether the event is movable in time. If set to `false` has precedence over the [`dragInTime`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragInTime) option of the calendar.
- `resize` - Specifies whether the event is resizable. If set to `false` has precedence over the [`dragToResize`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-dragToResize) option of the calendar.
- `overlap` - Specifies whether overlap is allowed on the event. If set to `false` has precedence over the [`eventOverlap`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-eventOverlap) option of the calendar.
- `editable` - Denotes if the event is editable. If set `false`, the event cannot be dragged, resized or deleted even if globally enabled
- `cssClass` - 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.

## What this demo shows

- A desktop month view event calendar is displayed alongside a code example that explains the structure of an event object and its supported properties.
- **Code example** The left-side code snippet shows an event definition with the event properties used by the calendar.
- **Add event action** A button below the code snippet lets users add a new event to the calendar from the event data shown in the code example.
- **Add event feedback** Hovering the button highlights it, and clicking it adds the event to the calendar and shows a confirmation toast at the bottom center of the calendar.
- **Event labels** Day cells that contain events render labels inside the month grid.
- **Initial event state** The demo starts with a single event added to today's date.
- **Event interaction** Hovering over or selecting an event label highlights it.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** Months can be changed by clicking and dragging the calendar left or right.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button between them on the right.

## Best for

- **Understanding event data** Showing how Mobiscroll event objects are structured and which built-in properties affect calendar rendering and behavior.

## Tutorial

```ts
{
    // 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](https://demo.mobiscroll.com/angular/eventcalendar/load-events-on-demand) into the calendar and [perform CRUD operations](https://demo.mobiscroll.com/angular/eventcalendar/add-delete-event).

## 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
- [`labels`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-labels) - option
- [`navigateToEvent`](https://mobiscroll.com/docs/angular/eventcalendar/api#method-navigateToEvent) - method
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendar,
  MbscEventcalendarView,
  MbscModule,
  Notifications,
  setOptions,
} from '@mobiscroll/angular';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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',
    });
  }
}
```

### Template

```html
<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>
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
```

## Implementation notes

- Set `view: { calendar: { labels: true } }`. Initialize `data` with one event for today's date to show the calendar populated on load.
- An event object requires at minimum a `start` value; `title`, `color`, and `end` are the most commonly used display properties. Beyond the built-in properties, any custom field (e.g. `busy`, `description`, `location`) can be added to the event object - Mobiscroll passes custom fields through transparently so they remain accessible in event handlers and templates.
- To add an event and jump to it: construct a new event object with base and custom properties, append it to `data`, then call `navigateToEvent(newEvent)` on the calendar instance to jump to the event's date. Vue: access the calendar instance via `calInst.value.instance`. Angular: use `@ViewChild` to access the `MbscEventcalendar` instance. JS/jQuery (imperative API): call `calendar.addEvent(newEvent)` then `calendar.navigateToEvent(newEvent)`.

## 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
   ```

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

- Next: [Date Format Inputs](https://demo.mobiscroll.com/angular/eventcalendar/date-object-ISO-8601-moment.md) - Pass JavaScript Date objects, ISO strings, or Moment.js dates to a Angular event calendar — see all three supported input formats for event data. For Angular 22 and Ionic 8.