---
title: "Javascript Event calendar Show All or Limit Event Labels Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/show-more-all-labels"
---

# Show All or Limit Event Labels - JavaScript Event calendar demo

Show all event labels with dynamic row heights or limit labels per day in a Javascript month-view calendar — hidden events appear in a "show more" popover. Plain JS api for usage everywhere.

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

## Description

Labels on the event calendar go hand in hand with the height of the event calendar rows (representing weeks). It is possible to render as many labels as fit and keep the row heights equal. The row height is liquid and determined by the height of the calendar.

If you would like to render all labels, then passing `labels: 'all'` will do just that. This can make the row heights variable.

Alternatively a maximum number of labels can be set by passing a number to the `labels` property of the `view.calendar` option.

If there are more events than the number of labels for a particular day, an "x more" label will help users list out all events for the day.

By default the width of the labels fill the day cells (`eventDisplay: 'fill'`) but alternatively `eventDisplay: 'exact'` can be used to display the labels with exact times.

## What this demo shows

- A desktop month-view event calendar that shows event labels inside day cells and demonstrates how label count and row height settings affect event visibility.
- **Event labels** Day cells with events show one or more labels, with different colors and styles used to distinguish all-day, multi-day, and timed events.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **Row height behavior** In the default setup, the month view uses dynamic row heights so all labels remain visible within each week row.
- **Label rendering controls** A configuration panel next to the calendar lets users switch between `Fill` and `Exact` label rendering. `Fill` is selected by default and stretches labels across the available width.
- **Exact label rendering** Selecting `Exact` displays labels with exact times. In this mode, the label count display mode is not configurable, and the calendar shows as many labels as fit in each day cell with equal week row heights.
- **View switching** A second segmented control lets users switch between `Month view` and `Week view`, with month view selected by default.
- **Label count options** Below the segmented controls, an option list is shown from which users can choose between: `Show all labels` (the row height will be dynamic so every label can remain visible), `Show up to (a specified maximum number of) labels`, or `Labels depending on calendar height` (showing as many labels as fit based on the calendar height with equal row heights).
- **More events popover** When the visible label count is limited, extra events are hidden behind an `X more` label on the day cell, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **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.
- **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

- **Monthly planning views** Showing multiple events directly in month cells when users need a compact overview of busy days.
- **Dense event calendars** Comparing how different label display strategies work when days can contain many all-day or timed events.
- **Configurable calendar experiences** Giving users or teams control over month and week views and how event labels are rendered.

## Tutorial

Render labels:

- (x) Fill
- ( ) Exact
- (x) Month view
- ( ) Week view
- (x) Show all labels
- ( ) Show up to `4` labels
- ( ) Labels depending on calendar height

```js
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: 'all',
      type: 'month',
      eventDisplay: 'fill'
    }
  }
});
```

With "Exact":

```js
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: true,
      type: 'month',
      eventDisplay: 'exact'
    }
  }
});
```

With "Week view":

```js
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: 'all',
      type: 'week',
      eventDisplay: 'fill'
    }
  }
});
```

With "Show up to labels":

```js
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: 4,
      type: 'month',
      eventDisplay: 'fill'
    }
  }
});
```

With "Labels depending on calendar height":

```js
mobiscroll.eventcalendar('#my-calendar', {
  view: {
    calendar: {
      labels: true,
      type: 'month',
      eventDisplay: 'fill'
    }
  }
});
```

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

## Code

### JS

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

var allLabels = mobiscroll.eventcalendar('#demo-labels-all', {
  view: {
    calendar: { type: 'month', labels: 'all' },
  },
});

var nrLabels = mobiscroll.eventcalendar('#demo-labels-nr', {
  view: {
    calendar: { type: 'month', labels: 3 },
  },
});

var fitLabels = mobiscroll.eventcalendar('#demo-labels-fit', {
  view: {
    calendar: { type: 'month', labels: true },
  },
});

var allLabelsWeeks = mobiscroll.eventcalendar('#demo-labels-all-w', {
  view: {
    calendar: { type: 'week', labels: 'all' },
  },
});

var nrLabelsWeeks = mobiscroll.eventcalendar('#demo-labels-nr-w', {
  view: {
    calendar: { type: 'week', labels: 3 },
  },
});

var labelsWeeks = mobiscroll.eventcalendar('#demo-labels-fit-w', {
  view: {
    calendar: { type: 'week', labels: true },
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    fitLabels.setEvents(events);
    allLabels.setEvents(events);
    nrLabels.setEvents(events);
    labelsWeeks.setEvents(events);
    allLabelsWeeks.setEvents(events);
    nrLabelsWeeks.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div class="mbsc-grid">
    <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">All labels</div>
                <div id="demo-labels-all"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Up to 3 labels</div>
                <div id="demo-labels-nr"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Labels fitting the row</div>
                <div id="demo-labels-fit"></div>
            </div>
        </div>
    </div>
    <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">All labels</div>
                <div id="demo-labels-all-w"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Up to 3 labels</div>
                <div id="demo-labels-nr-w"></div>
            </div>
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-4">
            <div class="mbsc-form-group">
                <div class="mbsc-form-group-title">Labels fitting the row</div>
                <div id="demo-labels-fit-w"></div>
            </div>
        </div>
    </div>
</div>
```

## Implementation notes

- Render six separate `Eventcalendar` instances arranged in a 2×3 grid to demonstrate all `labels` variants side by side. The first row shows month views; the second row shows week views.
- The three `labels` values used across both rows:
  - `labels: 'all'` - every event label is rendered; week row heights grow dynamically to fit all events
  - `labels: 3` - at most 3 labels per day cell; extra events are hidden behind an `X more` indicator that opens a popover on click
  - `labels: true` - shows as many labels as fit the cell at equal row height; extras are hidden behind `X more`
- Month view configs: `{ calendar: { type: 'month', labels: 'all' } }`, `{ calendar: { type: 'month', labels: 3 } }`, `{ calendar: { labels: true } }`. Week view configs: `{ calendar: { type: 'week', labels: 'all' } }`, `{ calendar: { type: 'week', labels: 3 } }`, `{ calendar: { type: 'week', labels: true } }`.
- Load events from a remote endpoint using `getJson` and pass the same `data` array to all six instances; for the imperative API, call `inst.setEvents(events)` on each 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: [Quarter and Year View](https://demo.mobiscroll.com/javascript/eventcalendar/quarter-year-view.md) - Show three months or a full year in the Javascript event calendar — switch between quarter and year views to give users a planning-scale event overview.
- Next: [Colored Cell Backgrounds](https://demo.mobiscroll.com/javascript/eventcalendar/colored-cell-background.md) - Color day-cell backgrounds in a Javascript event calendar — mark exact or recuring dates or date ranges as visual highlights for holidays and special days.