---
title: "Javascript Event calendar Custom Label Styling Example | Mobiscroll"
component: "Event calendar"
framework: "JavaScript"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/javascript/eventcalendar/customize-label-look-and-feel"
---

# Custom Label Styling - JavaScript Event calendar demo

Fully customize event labels in the Javascript event calendar — set colors, show timed-event dots, and include custom fields beyond the event title. Plain JavaScript API.

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

## Description

You can customize the look of the labels and show additional content besides the `event.title`. There are two approaches you can take:

- **Only customize the content of the labels** - For this you will want to use the [`renderCalendarEventContent` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderCalendarEventContent). The `color` and positioning of the label will be handled by the calendar. The `title` and any other custom fields you want to show inside the label is your responsibility.
- **Fully customize how the labels look** *(like in this example)* - Use the [`renderCalendarEvent` option](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderCalendarEvent). All original event fields along with computed fields like `isMultiDay`, `lastDay` can be leveraged for constructing the render function. With the `renderCalendarEvent` you will have full control over how the labels are styled including things like `color`, `title` and any custom fields.

## What this demo shows

- A desktop month view event calendar with a full month grid layout.
- **Event labels** Days with events display labels directly inside the month cells.
- **Custom label rendering** The demo shows labels with a fully customized visual appearance: all day or multiple all day event labels have stron colors and the event title at the beggining of the event and timed events are marked with a small colored dot at the left and the event title next to it.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **Event selection** Clicking an event label shows a toast with the event title at the bottom center part of the calendar.
- **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.
- **Month navigation** The month view can be changed by clicking and dragging the calendar left or right.
- **Header controls** The header shows the current month and year on the left, with blue previous and next navigation arrows plus a `Today` button on the right.

## Best for

- **Branded calendar experiences** Products that need event labels to match a custom visual style instead of the default calendar appearance.
- **Category-based event display** Use cases where color and custom label design help users quickly distinguish event types, statuses, or teams.
- **Richer event summaries** Calendars that need to show more than the event title, such as custom fields or additional context inside the label.

## 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
- [`renderCalendarEvent`](https://mobiscroll.com/docs/javascript/eventcalendar/api#renderer-renderCalendarEvent) - 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-mobile-month-view', {
  theme: 'ios',
  themeVariant: 'light',
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  view: {
    calendar: { labels: true },
  },
  renderCalendarEvent: function (data) {
    if (data.isMultiDay) {
      return '<div style="background:' + data.original.color + ';color:#000" class="multi-day-event">' + data.original.title + '</div>';
    } else {
      return (
        '<div class="single-day-event-dot" style="background:' +
        data.original.color +
        '"></div>' +
        '<div class="single-day-event">' +
        data.original.title +
        '</div>'
      );
    }
  },
  onEventClick: function (args) {
    mobiscroll.toast({
      message: args.event.title,
    });
  },
});

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

### HTML

```html
<div id="demo-mobile-month-view"></div>
```

### CSS

```css
.single-day-event-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 7px;
}

.single-day-event {
    margin-left: 8px;
}

.multi-day-event {
    padding-left: 5px;
}
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` for a month grid with inline event labels.
- Use the full label renderer - `renderCalendarEvent` (Angular: `calendarEventTemplate`, Vue: `calendarEvent` slot) - to take complete control over each label's markup and styling. The render function receives a `data` object with computed fields alongside the original event; use `data.isMultiDay` to branch the template: multi-day events get a solid colored background using `data.original.color` with `data.original.title` as text; single-day events get a small colored dot followed by the title.
- For lighter customization where the calendar handles color and positioning automatically, use `renderCalendarEventContent` (Angular: `calendarEventContentTemplate`, Vue: `calendarEventContent` slot) instead - only the inner content is replaced.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.
- 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

- Next: [Event Popover](https://demo.mobiscroll.com/javascript/eventcalendar/customize-event-popover.md) - 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.