---
title: "React Agenda Theme Customization Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/agenda/themes-ios-material-windows"
---

# Theme Customization - React Agenda demo

Customize the React agenda view with iOS, Material, and Windows base themes — switch light or dark mode, use the theme builder, or apply custom CSS. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/themes-ios-material-windows)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/themes-ios-material-windows)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/themes-ios-material-windows)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/themes-ios-material-windows.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/themes-ios-material-windows.md), [Angular](https://demo.mobiscroll.com/angular/agenda/themes-ios-material-windows.md), [Vue](https://demo.mobiscroll.com/vue/agenda/themes-ios-material-windows.md)

## Description

The look and feel of the agenda can be deeply customized. There are four levels of customization:

- Base themes: Choose between `Mobiscroll`, `iOS`, `Android Material` and `Windows`.
- Light or dark: Every theme has a `light` and `dark` variant. Setting the `themeVariant` to `'auto'` will switch based on system settings.
- Custom themes: Use the [theme builder](https://mobiscroll.com/themebuilder) to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.

You can also see how every example looks by changing the theme from the header.

## What this demo shows

- Shows a monthly agenda view with events listed and grouped by date.
- **Theme controls** A segmented picker lets you switch between the `iOS`, `Material`, and `Windows` base themes, with `iOS` selected by default.
- **Theme variant** A dark-theme switch is enabled by default, showing how the same calendar can be previewed in a dark variant.
- **Custom theme option** A separate switch for theme builder or Sass-based customization is present but turned off by default.
- **Header navigation** The month and year label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Theme comparison** Evaluating how the same agenda view looks with the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark mode previewing** Checking how an agenda setup behaves across light and dark theme variants.
- **Branded calendar experiences** Exploring how a base theme can be extended with theme builder, Sass, or custom CSS to match a product's visual style.

## Tutorial

### Pick a base theme

- (x) iOS
- ( ) Material
- ( ) Windows

### Then choose between light or dark theme variant

- [ ] Turn dark theme on

### Or build a custom theme based on any base theme

- [ ] Use the [theme builder](https://mobiscroll.com/themebuilder) or [Sass](https://mobiscroll.com/docs/react/eventcalendar/css-variables) to customize themes

```jsx
<Eventcalendar
    theme="ios"
    themeVariant="light"
/>
```

With "Material":

```jsx
<Eventcalendar
    theme="material"
    themeVariant="light"
/>
```

With "Windows":

```jsx
<Eventcalendar
    theme="windows"
    themeVariant="light"
/>
```

## API used in this demo

- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

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

setOptions({
});

function App() {
  const [myEvents, setEvents] = useState([]);
  const [myTheme, setTheme] = useState();
  const [myThemeVariant, setThemeVariant] = useState();

  const myView = useMemo(() => ({ agenda: { type: 'month' } }), []);

  const handleThemeChange = useCallback((ev) => {
    setTheme(ev.target.value);
  }, []);

  const handleThemeVariantChange = useCallback((ev) => {
    setThemeVariant(ev.target.value);
  }, []);

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

  return (
    <Page className="mds-full-height">
      <div className="mds-full-height mbsc-flex-col">
        <div className="mbsc-grid">
          <div className="mbsc-row">
            <div className="mbsc-col-sm-6">
              <Dropdown inputStyle="box" label="Theme" labelStyle="stacked" value={myTheme} onChange={handleThemeChange}>
                <option value="auto">Auto</option>
                <option value="ios">iOS</option>
                <option value="material">Material</option>
                <option value="windows">Windows</option>
              </Dropdown>
            </div>
            <div className="mbsc-col-sm-6">
              <Dropdown
                inputStyle="box"
                label="Theme variant"
                labelStyle="stacked"
                value={myThemeVariant}
                onChange={handleThemeVariantChange}
              >
                <option value="auto">Auto</option>
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </Dropdown>
            </div>
          </div>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar data={myEvents} theme={myTheme} themeVariant={myThemeVariant} view={myView} />
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

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

setOptions({
});

const App: FC = () => {
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
  const [myTheme, setTheme] = useState();
  const [myThemeVariant, setThemeVariant] = useState();

  const myView = useMemo<MbscEventcalendarView>(() => ({ agenda: { type: 'month' } }), []);

  const handleThemeChange = useCallback((ev: MbscCalendarEvent) => {
    setTheme(ev.target.value);
  }, []);

  const handleThemeVariantChange = useCallback((ev: MbscCalendarEvent) => {
    setThemeVariant(ev.target.value);
  }, []);

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

  return (
    <Page className="mds-full-height">
      <div className="mds-full-height mbsc-flex-col">
        <div className="mbsc-grid">
          <div className="mbsc-row">
            <div className="mbsc-col-sm-6">
              <Dropdown inputStyle="box" label="Theme" labelStyle="stacked" value={myTheme} onChange={handleThemeChange}>
                <option value="auto">Auto</option>
                <option value="ios">iOS</option>
                <option value="material">Material</option>
                <option value="windows">Windows</option>
              </Dropdown>
            </div>
            <div className="mbsc-col-sm-6">
              <Dropdown
                inputStyle="box"
                label="Theme variant"
                labelStyle="stacked"
                value={myThemeVariant}
                onChange={handleThemeVariantChange}
              >
                <option value="auto">Auto</option>
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </Dropdown>
            </div>
          </div>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar data={myEvents} view={myView} theme={myTheme} themeVariant={myThemeVariant} />
        </div>
      </div>
    </Page>
  );
};
export default App;
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
```

## Implementation notes

- Use `view: { agenda: { type: 'month' } }`. Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback.
- `theme` accepts `auto`, `ios`, `material`, `windows`. `themeVariant` accepts `auto`, `light`, `dark`. React/Angular/Vue: change either at runtime by updating the bound `theme`/`themeVariant` prop value. JS/jQuery: call `inst.setOptions({ theme })` / `inst.setOptions({ themeVariant })`.

## 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