---
title: "Javascript Event calendar Event Popover Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/customize-event-popover"
---

# Event Popover - JavaScript Event calendar demo

Customize how events appear in the day popover of a Javascript event calendar — use full custom layouts or add fields like assignee, location, and participants. Plain JS api for usage everywhere.

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

## Description

The events listed in the popover can be customized in two ways:

- **Full event customization** *(like in this example)* - The calendar handles the rendering of events in the correct order. Styling the content, colors and everything else is your responsibility.
- **Content customization** - The calendar prints the `start` and `end` times, `allDay` and sets the appropriate `color`. Content like title and other fields can be shown.

You can provide styling to the `title` field and any other custom fields like `description`, `location`, `participants` ...

Pass a rendering function to the [`renderPopoverEventContent` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderPopoverEventContent). All original event fields along with computed fields like `isMultiDay`, `lastDay` are passed to the function. For a fully custom event rendering use the [`renderPopoverEvent` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderPopoverEvent).

If you add custom markup you will want to add styling too. Use the `popoverClass` under the `view` option to tell the calendar what CSS class it should append to the popover container so that you can write specific CSS rules.

## What this demo shows

- A mobile-style month event calendar with fully customized events shown in the popover.
- **Month grid** Days with scheduled events show a small marker below the day number.
- **Day hover state** Hovering over a day cell highlights the day number with a gray background.
- **Day selection** Clicking a day selects it and highlights the day number with a blue background.
- **Popover trigger** Clicking a day with an event marker opens a popover below the day cell.
- **Popover content** The popover lists the events scheduled for the selected day.
- **Custom event layout** Each customized event includes a colored leading line, event title, assignee image, assignee name, and time information.
- **All-day events** All-day events display an `All-day` label instead of a time range.
- **Timed events** Time-specific events display the start and end time.
- **Event action** Each event includes a blue `Add participant` button that highlights on hover and can be wired to a custom action.
- **Calendar navigation** The calendar supports horizontal drag navigation for moving between months.
- **Header controls** The header shows the current month and year on the left side, while the right side includes blue previous and next navigation arrows, and a `Today` button for returning to the current date.

## Best for

- **Assigned work and people-based scheduling** Displaying assignees, avatars, and event ownership directly in the popover list.
- **Actionable event lists** Adding buttons or other controls to day-level event previews so users can trigger follow-up actions from the popover.
- **Compact month browsing** Letting users scan a month quickly, spot days with events, and open a lightweight detail view only when needed.

## 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
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-labels) - option
- [`renderPopoverEventContent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderPopoverEventContent) - renderer
- [`onEventClick`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onEventClick) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
var inst = mobiscroll.eventcalendar('#demo-custom-event-popover', {
  theme: 'ios',
  themeVariant: 'light',
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: {
      labels: false,
      popover: true,
      popoverClass: 'custom-event-popover',
    },
  },
  renderPopoverEventContent: function (data) {
    return (
      '<div">' +
      data.title +
      '</div>' +
      '<div class="md-custom-event-cont">' +
      '<img class="md-custom-event-img" src="' +
      getParticipant(data.original.participant).img +
      '"/>' +
      '<div class="mbsc-custom-event-name">' +
      getParticipant(data.original.participant).name +
      '</div>' +
      '<button mbsc-button class="md-custom-event-btn" data-color="primary" data-variant="outline">Add participant</button>' +
      '</div>'
    );
  },
  onEventClick: function (args) {
    if (args.domEvent.target.classList.contains('md-custom-event-btn')) {
      args.domEvent.stopPropagation();
      mobiscroll.toast({
        message: getParticipant(args.event.participant).name + "'s event clicked",
      });
    }
  },
});

function getParticipant(id) {
  switch (id) {
    case 1:
      return {
        img: 'https://img.mobiscroll.com/demos/m1.png',
        name: 'Barry L.',
      };
    case 2:
      return {
        img: 'https://img.mobiscroll.com/demos/f1.png',
        name: 'Hortense T.',
      };
    case 3:
      return {
        img: 'https://img.mobiscroll.com/demos/m2.png',
        name: 'Carl H.',
      };
  }
}

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

### HTML

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

### CSS

```css
.md-custom-event-img {
    width: 30px;
    height: 30px;
}

.mbsc-custom-event-name {
    padding: 0 10px;
}

.md-custom-event-cont {
    display: flex;
    align-items: center;
    padding-top: 10px;
    font-size: 13px;
}

.md-custom-event-btn.mbsc-button {
    position: absolute;
    right: 10px;
    bottom: 8px;
    line-height: 20px;
    padding: 0px 6px;
}

.custom-event-popover.mbsc-material .mbsc-popover-list .mbsc-event {
    padding: 10px 14px;
}

.custom-event-popover.mbsc-ios .mbsc-popover-list {
    width: 340px;
}

.custom-event-popover.mbsc-material .mbsc-popover-list {
    width: 320px;
}

.custom-event-popover.mbsc-windows .mbsc-popover-list {
    width: 340px;
}
```

## Implementation notes

- Set `view: { calendar: { labels: false, popover: true, popoverClass: 'custom-event-popover' } }`: `labels: false` suppresses inline labels so only a dot marker appears; `popover: true` opens the event list on day click; `popoverClass` adds a custom CSS class to the popover container for targeted styling.
- Use `renderPopoverEventContent` (Angular: `popoverEventContentTemplate`, Vue: `popoverEventContent` slot) to customize the content of each event row in the popover while the calendar handles event ordering and the outer popover frame. The render function receives `data` with `data.title` and `data.original` for any custom event fields - this demo uses `data.original.participant` to look up an assignee name and avatar image. For full control over the outer event wrapper, use `renderPopoverEvent` (Angular: `popoverEventTemplate`, Vue: `popoverEvent` slot) instead.
- Add a `Button` inside the custom content with `color="primary"` and `variant="outline"`. Call `ev.stopPropagation()` in its click handler to prevent the calendar's `onEventClick` from firing, then show a `Toast` with the participant's name.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## 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 Display](https://demo.mobiscroll.com/javascript/eventcalendar/customize-label-look-and-feel.md) - Control event label appearance in a Javascript event calendar — customize colors, timed-event dots, and custom fields beyond the title.
- Next: [Custom Header](https://demo.mobiscroll.com/javascript/eventcalendar/customizing-header.md) - Customize the Javascript event calendar header — rearrange navigation, add a Today button, and switch between calendar and scheduler views.