---
title: "Javascript Agenda Event Data Structure Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/event-data-structure"
---

# Event Data Structure - JavaScript Agenda demo

Structure event objects for the Javascript Agenda — configure start, end, recurrence, resource, and color properties, and extend events with custom fields. Plain JavaScript API.

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

## Description

The event data structure for the agenda 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/javascript/agenda/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/javascript/agenda/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/javascript/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/javascript/eventcalendar/api#opt-dataTimezone).
- `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 agenda, 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 agenda, 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

- Shows a daily agenda view with events listed.
- **Code example** The left-side code snippet shows an event definition with the event properties used by the agenda.
- **Add event action** A button below the code snippet lets users add a new event to the agenda 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 agenda and shows a confirmation toast at the bottom center of the agenda.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between days and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Events** Events are displayed as agenda cards with a colored strip on the left, the event title next to it, and the start and end time stacked on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it, then shows a toast message with the event title.

## Best for

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

## Tutorial

```js
{
    // base properties
    title: 'Product planning',
    color: '#56ca70',
    start: '2026-10-23T13:00',
    end: '2026-10-23T14: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/javascript/agenda/load-events-on-demand) into the agenda.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-data) - option
- [`addEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-addEvent) - method
- [`navigateToEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-navigateToEvent) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var now = new Date();
var calendar = mobiscroll.eventcalendar('#demo-event-data', {
  view: {
    agenda: { type: 'month' },
  },
  data: [
    {
      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',
    },
  ],
});

document.getElementById('demo-event-data-add').addEventListener('click', function () {
  var newEvent = {
    // 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',
  };

  calendar.addEvent(newEvent);
  calendar.navigateToEvent(newEvent);

  mobiscroll.toast({
    message: 'Event added',
  });
});
```

### HTML

```html
<div mbsc-page class="mds-full-height">
  <div class="mds-full-height mbsc-flex-col">
    <div class="mbsc-flex-none">
      <button mbsc-button id="demo-event-data-add" data-start-icon="plus">Add event to calendar</button>
    </div>
    <div id="demo-event-data" class="mbsc-flex-1-1"></div>
  </div>
</div>
```

### CSS

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

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Pre-seed the calendar with one event for today using standard fields: `title`, `color`, `start`, `end`.
- An event object combines base Mobiscroll fields (`title`, `color`, `start`, `end`) with any custom application fields (e.g. `busy`, `description`, `location`). To add an event and scroll to it: add the object to the events array (or call `inst.addEvent(newEvent)`), then call `navigateToEvent(newEvent)` (or `inst.navigateToEvent(newEvent)`) to scroll the agenda to it.

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Next: [Supported Date Formats](https://demo.mobiscroll.com/javascript/agenda/date-object-ISO-8601-moment.md) - Use JS Date objects, ISO 8601 strings, or Moment.js values in the Javascript Agenda — pass them to event data, markers, colors, and labels.