---
title: "Javascript Scheduler Themes — iOS, Material & Windows Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/themes-ios-material-windows"
---

# Themes — iOS, Material & Windows - JavaScript Scheduler demo

Preview iOS, Material, and Windows themes on the Javascript Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides. Plain JS api for usage everywhere.

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

## Description

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

- **Base themes:** Choose between **iOS**, **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

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **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 scheduler 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, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## Best for

- **Theme comparison** Evaluating how the scheduler looks with the `iOS`, `Material`, and `Windows` base themes.
- **Light and dark mode previewing** Checking how a scheduler 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/javascript/eventcalendar/css-variables) to customize themes

```js
theme: 'ios',
themeVariant: 'light'
```

With "Material":

```js
theme: 'material',
themeVariant: 'light'
```

With "Windows":

```js
theme: 'windows',
themeVariant: 'light'
```

## API used in this demo

- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) - method
- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
});

var inst = mobiscroll.eventcalendar('#demo-theme', {
  view: {
    scheduler: { type: 'week' },
  },
});

document.getElementById('demo-theme-select').addEventListener('change', function (ev) {
  inst.setOptions({ theme: ev.target.value });
});

document.getElementById('demo-theme-variant-select').addEventListener('change', function (ev) {
  inst.setOptions({ themeVariant: ev.target.value });
});

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

### HTML

```html
<div mbsc-page class="mds-full-height">
  <div class="mds-full-height mbsc-flex-col">
    <div class="mbsc-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-6">
          <label>
            <select id="demo-theme-select" mbsc-dropdown data-input-style="box" label="Theme" data-label-style="stacked">
              <option value="auto">Auto</option>
              <option value="ios">iOS</option>
              <option value="material">Material</option>
              <option value="windows">Windows</option>
            </select>
          </label>
        </div>
        <div class="mbsc-col-sm-6">
          <label>
            <select id="demo-theme-variant-select" mbsc-dropdown data-input-style="box" label="Theme variant" data-label-style="stacked">
              <option value="auto">Auto</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </select>
          </label>
        </div>
      </div>
    </div>
    <div id="demo-theme" class="mbsc-flex-1-1"></div>
  </div>
</div>
```

### CSS

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

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }`. Pass `theme` and `themeVariant` as props to the Eventcalendar. Both default to `'auto'` - `theme: 'auto'` lets Mobiscroll pick based on the platform, `themeVariant: 'auto'` follows the OS light/dark preference.
- `theme` accepts `auto`, `ios`, `material`, `windows`; `themeVariant` accepts `auto`, `light`, `dark`. For the imperative API, both can be updated at runtime via `inst.setOptions({ theme: value })` / `inst.setOptions({ themeVariant: value })`.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. For the imperative API, call `inst.setEvents(events)` in the callback.
- Wrap the page in a Mobiscroll `Page` component. Use a `mbsc-flex-col` layout so the dropdowns sit above the calendar and the calendar fills the remaining height.

## 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: [Resource Filtering in Header](https://demo.mobiscroll.com/javascript/scheduler/resource-filtering-in-header.md) - Add a segmented resource filter to the Javascript Scheduler header — place it between navigation buttons to let users switch resources inline.
- Next: [Resource Background Styling](https://demo.mobiscroll.com/javascript/scheduler/resource-background.md) - Color-code resources in a Javascript Scheduler with custom backgrounds and CSS classes — style headers, all-day areas, and grid columns per resource.