---
title: "JQuery Event calendar Event Labels Example | Mobiscroll"
component: "Event calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/eventcalendar/event-labels"
---

# Event Labels - jQuery Event calendar demo

Show colour-coded event labels inside each day cell of a JQuery month view event calendar — events that don't fit open in a popover.

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

## Description

Events can be displayed in a couple of different ways. Most of the time showing the event data inside and across the calendar cells is the way to go. When configuring the `calendar` object, you can set `labels: true`. All of this happens under the [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) option.

The number of visible labels are determined by the available space and the ones that don't fit will be shown in a popover. To save vertical space you can [show all events in a popover](https://demo.mobiscroll.com/jquery/eventcalendar/event-popover).

**Rather show events in a pop-over?** [Take a look at the next example →](https://demo.mobiscroll.com/jquery/eventcalendar/event-popover)

## What this demo shows

- A desktop month view event calendar that expands horizontally to fill the available width of its parent container as the screen size or browser width changes.
- **Month grid:** Day cells display event labels directly inside the calendar, giving users a full-month overview on larger screens.
- **Event labels:** Labels use different visual styles for different event types, including all-day events, multi-day all-day events, and timed events with a specific end time.
- **Color coding:** Event colors help distinguish events at a glance.
- **Overflow handling:** The number of visible labels in each day cell depends on the available vertical space.
- **More events popover:** When a day contains more events than can fit, an `X more` label appears in the cell and opens a popover with the remaining events when clicked.
- **Event selection:** Clicking or hovering an event label highlights it. Clicking an event also shows a toast at the bottom center of the view with the event title.
- **Day hover state:** Hovering a day cell highlights the day number in the top-right corner with a gray background.
- **Day selection:** Clicking an empty area of a day cell selects that day and highlights the day number with a blue background.
- **Swipe navigation:** The month can be changed by clicking and dragging the calendar left or right.
- **Header navigation:** The header shows the current month and year on the left, with previous and next arrow buttons for changing months and a `Today` button (between the navigation arrows) for returning to today's date.

## Best for

- **Desktop month overviews:** Showing a full month of events on larger screens where both horizontal and vertical space are available.
- **Color-coded planning:** Scenarios where users need to visually distinguish event types and scan the month quickly.
- **Interactive browsing:** Use cases where users need to inspect events, select days, and move between months directly from the month grid.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option
- [`labels`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-labels) - option
- [`onEventClick`](https://mobiscroll.com/docs/jquery/eventcalendar/api#event-onEventClick) - event
- [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method

## Code

### JS

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

$(function () {
  var inst = $('#demo-events-labels')
    .mobiscroll()
    .eventcalendar({
      clickToCreate: true,
      dragToCreate: true,
      dragToMove: true,
      dragToResize: true,
      eventDelete: true,
      view: {
        calendar: {
          labels: true,
        },
      },
      onEventClick: function (args) {
        mobiscroll.toast({
          message: args.event.title,
        });
      },
    })
    .mobiscroll('getInst');

  $.getJSON(
    'https://trial.mobiscroll.com/events/?vers=5&callback=?',
    function (events) {
      inst.setEvents(events);
    },
    'jsonp',
  );
});
```

### HTML

```html
<div id="demo-events-labels"></div>
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` to display a month grid with inline event labels in each day cell. When labels overflow the available cell height, the remainder appear in an `X more` popover automatically.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.

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

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 jquery --trial`.

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

## Related demos

- Next: [Event Popover](https://demo.mobiscroll.com/jquery/eventcalendar/event-popover.md) - Keep the month grid clean in a JQuery event calendar — day cells show a dot or event count, and clicking opens a popover listing that day's events.