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

# Custom Label Styling - React Event calendar demo

Fully customize event labels in the React event calendar — set colors, show timed-event dots, and include custom fields beyond the event title. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/eventcalendar/customize-label-look-and-feel)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/calendar-view/customize-label-look-and-feel)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/calendar-view/customize-label-look-and-feel)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/customize-label-look-and-feel.md), [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), [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/react/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/react/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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`labels`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-labels) - option
- [`clickToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-eventDelete) - option
- [`renderCalendarEvent`](https://mobiscroll.com/docs/react/eventcalendar/api#renderer-renderCalendarEvent) - renderer
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option
- [`onEventClick`](https://mobiscroll.com/docs/react/eventcalendar/api#event-onEventClick) - event
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event

## Code

### JSX

```jsx
import { Eventcalendar, getJson, setOptions, Toast } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [myEvents, setEvents] = useState([]);
  const [isToastOpen, setToastOpen] = useState(false);
  const [toastText, setToastText] = useState();

  const myView = useMemo(() => ({ calendar: { labels: true } }), []);

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const handleEventClick = useCallback((args) => {
    setToastText(args.event.title);
    setToastOpen(true);
  }, []);

  const customLabel = useCallback(
    (data) =>
      data.isMultiDay ? (
        <div style={{ background: data.original.color, color: '#000' }} className="multi-day-event">
          {data.original.title}
        </div>
      ) : (
        <>
          <div className="single-day-event-dot" style={{ background: data.original.color }}></div>
          <div className="single-day-event">{data.original.title}</div>
        </>
      ),
    [],
  );

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        renderCalendarEvent={customLabel}
        data={myEvents}
        view={myView}
        onEventClick={handleEventClick}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
    </>
  );
}

export default App;
```

### TSX

```tsx
import {
  Eventcalendar,
  getJson,
  MbscCalendarEvent,
  MbscCalendarEventData,
  MbscEventcalendarView,
  MbscEventClickEvent,
  setOptions,
  Toast,
} from '@mobiscroll/react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [isToastOpen, setToastOpen] = useState<boolean>(false);
  const [toastText, setToastText] = useState<string>();

  const myView = useMemo<MbscEventcalendarView>(
    () => ({
      calendar: { labels: true },
    }),
    [],
  );

  const customLabel = useCallback((data: MbscCalendarEventData) => {
    const original = data.original!;
    if (data.isMultiDay) {
      return (
        <div style={{ background: original.color }} className="multi-day-event">
          {original!.title}
        </div>
      );
    } else {
      return (
        <>
          <div className="single-day-event-dot" style={{ background: original.color }}></div>
          <div className="single-day-event">{original.title}</div>
        </>
      );
    }
  }, []);

  const handleToastClose = useCallback(() => {
    setToastOpen(false);
  }, []);

  const onEventClick = useCallback((args: MbscEventClickEvent) => {
    setToastText(args.event.title);
    setToastOpen(true);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <div>
      <Eventcalendar
        clickToCreate={true}
        dragToCreate={true}
        dragToMove={true}
        dragToResize={true}
        eventDelete={true}
        renderCalendarEvent={customLabel}
        data={myEvents}
        view={myView}
        onEventClick={onEventClick}
      />
      <Toast message={toastText} isOpen={isToastOpen} onClose={handleToastClose} />
    </div>
  );
};
export default App;
```

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

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

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

## Related demos

- Next: [Event Popover](https://demo.mobiscroll.com/react/eventcalendar/customize-event-popover.md) - Customize how events appear in the day popover of a React event calendar — use full custom layouts or add fields like assignee, location, and participants.