---
title: "Javascript Agenda Full Event Customization Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/full-event-customization"
---

# Full Event Customization - JavaScript Agenda demo

Fully customize agenda event card layout — show images, location, participants, and custom fields in each event row. Plain JS api for usage everywhere.

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

## Description

Above the built in rendering mode you can either customize the full event or just the content of the event. If we break up the event into pieces there are four fields that we are interested in:

- The event `start` and `end` time
- Whether it is an `allDay` event or not
- The event `color`
- The event `title`

If you would like to keep the styling of the `start/end` times, `allDay` and `color` you will want to [customize the content only](https://demo.mobiscroll.com/javascript/agenda/event-content-customization), not the full event. In case of the full event customization the agenda takes care of positioning the event container and everything else is your responsibility.

You will have to place and provide styling to all event fields. Beside the ones mentioned above you'll be able to render other custom fields, like `description`, `location`, `participants` ...

Pass a rendering function to the [`renderAgendaEvent` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderAgendaEvent). All original event fields along with computed fields like `isMultiDay`, `lastDay` are available in the function.

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **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 months 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.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Custom event cards** Each event appears as a rich list item with a thumbnail image, title, location, and start time.
- **Custom layout** A full event template controls the agenda item layout, including its media and event details.
- **Event interaction** Hovering an event highlights it.

## Best for

- **Event guides** Pair event imagery with titles, locations, and start times in a scannable agenda.
- **Community calendars** Help people distinguish local events quickly using visual, location, and time details.
- **Conference schedules** Present sessions with recognizable imagery, venue details, and start times.
- **Travel itineraries** Organize scheduled stops and activities with location, time, and visual context.
- **Activity planners** Make planned activities easier to identify when several events appear on the same date.
- **Mobile event discovery apps** Support compact event browsing with the key details visible in each agenda item.

## 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
- [`renderAgendaEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderAgendaEvent) - renderer
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

var inst = mobiscroll.eventcalendar('#demo-event-template', {
  view: {
    agenda: { type: 'month' },
  },
  renderAgendaEvent: function (data) {
    return (
      '<div class="mbsc-flex mbsc-flex-1-1">' +
      '<img class="mds-agenda-event-img" src="https://img.mobiscroll.com/demos/' +
      data.original.img +
      '" />' +
      '<div class="mbsc-flex-1-1">' +
      '<div class="mds-agenda-event-title">' +
      data.title +
      '</div>' +
      '<div class="mbsc-flex">' +
      '<div class="mds-agenda-event-location mbsc-flex-1-1">' +
      '<div class="mds-agenda-event-label">Location</div>' +
      '<div>' +
      data.original.location +
      '</div>' +
      '</div>' +
      '<div class="mds-agenda-event-time">' +
      '<div class="mds-agenda-event-label">Time</div>' +
      '<div>' +
      data.start +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>'
    );
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/agenda-events/',
  function (events) {
    inst.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div id="demo-event-template"></div>
```

### CSS

```css
.mds-agenda-event-img {
  width: 100px;
  margin-right: 10px;
  border-radius: 6px;
}

.mds-agenda-event-title {
  font-size: 17px;
  font-weight: 600;
  padding-bottom: 10px;
}

.mds-agenda-event-location {
  line-height: 1.4;
  margin-right: 40px;
}

.mds-agenda-event-time {
  line-height: 1.4;
}

.mds-agenda-event-label {
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Load events from `https://trial.mobiscroll.com/agenda-events/` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback. Events have custom fields: `img` (image filename) and `location` (string).
- Use `renderAgendaEvent` (Angular: `agendaEventTemplate`, Vue: `agendaEvent` slot) for full event customization. The agenda handles positioning of the event container; all rendering of `start`/`end`, `allDay`, `color`, and `title` is the template's responsibility. The template receives a `data` object with: `title`, `start` (pre-formatted time string), `original` (the full event object including custom fields), `isMultiDay`, and `lastDay`.
- Inside the template, render a thumbnail image (sourced from `data.original.img`), the event title, and two side-by-side columns: location (`data.original.location`) and start time (`data.start`). Use Mobiscroll flex utilities (`mbsc-flex`, `mbsc-flex-1-1`) for the layout.

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

- Previous: [Event Content](https://demo.mobiscroll.com/javascript/agenda/event-content-customization.md) - Add custom fields, descriptions, participants, and action buttons to Javascript agenda items — the agenda renders time and color automatically.
- Next: [Event Calendar Agenda Custom Header](https://demo.mobiscroll.com/javascript/agenda/customizing-calendar-header.md) - Build a custom Javascript event calendar agenda header — rearrange navigation controls, add a view switcher, and control layout per theme.