---
title: "Vue Event calendar Themes and Dark Mode Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/themes-ios-material-windows"
---

# Themes and Dark Mode - Vue Event calendar demo

Apply iOS, Material, or Windows themes to a Vue event calendar — toggle light/dark mode or build a custom brand theme with the theme builder. For Vue and Nuxt.

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

## Description

The look and feel of the event calendar 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 month-view event calendar is shown alongside theme controls so you can preview different calendar looks in the same layout.
- **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.
- **Month grid** The calendar displays a full desktop month view with event labels rendered directly inside day cells.
- **Event labels** Events use different label styles and colors to distinguish all-day events, multi-day events, and timed events.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Label interaction** Hovering over or clicking an event label selects it and highlights the selected label.
- **Day cell states for future days** 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.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button (for jumping back to the current date) between them on the right. 
- **Month navigation gesture** The calendar also supports changing months by clicking and dragging the calendar left or right.

## Best for

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

```vue
<MbscEventcalendar
    theme="ios"
    themeVariant="light"
/>
```

With "Material":

```vue
<MbscEventcalendar
    theme="material"
    themeVariant="light"
/>
```

With "Windows":

```vue
<MbscEventcalendar
    theme="windows"
    themeVariant="light"
/>
```

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import {
  getJson,
  MbscDropdown,
  MbscEventcalendar,
  MbscPage
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

const myEvents = ref([])
const myTheme = ref('material')
const myThemeVariant = ref('dark')
const myView = { calendar: { labels: true } }

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscPage cssClass="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">
            <MbscDropdown inputStyle="box" label="Theme" labelStyle="stacked" v-model="myTheme">
              <option value="auto">Auto</option>
              <option value="ios">iOS</option>
              <option value="material">Material</option>
              <option value="windows">Windows</option>
            </MbscDropdown>
          </div>
          <div class="mbsc-col-sm-6">
            <MbscDropdown
              inputStyle="box"
              label="Theme variant"
              labelStyle="stacked"
              v-model="myThemeVariant"
            >
              <option value="auto">Auto</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </MbscDropdown>
          </div>
        </div>
      </div>
      <div className="mds-overflow-hidden mbsc-flex-1-1">
        <MbscEventcalendar
          :data="myEvents"
          :theme="myTheme"
          :themeVariant="myThemeVariant"
          :view="myView"
        />
      </div>
    </div>
  </MbscPage>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscDropdown,
  MbscEventcalendar,
  MbscPage
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

const myEvents = ref<MbscCalendarEvent[]>([])
const myTheme = ref<string>('material')
const myThemeVariant = ref<'light' | 'dark' | 'auto'>('dark')
const myView: MbscEventcalendarView = { calendar: { labels: true } }

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscPage cssClass="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">
            <MbscDropdown inputStyle="box" label="Theme" labelStyle="stacked" v-model="myTheme">
              <option value="auto">Auto</option>
              <option value="ios">iOS</option>
              <option value="material">Material</option>
              <option value="windows">Windows</option>
            </MbscDropdown>
          </div>
          <div class="mbsc-col-sm-6">
            <MbscDropdown
              inputStyle="box"
              label="Theme variant"
              labelStyle="stacked"
              v-model="myThemeVariant"
            >
              <option value="auto">Auto</option>
              <option value="light">Light</option>
              <option value="dark">Dark</option>
            </MbscDropdown>
          </div>
        </div>
      </div>
      <div className="mds-overflow-hidden mbsc-flex-1-1">
        <MbscEventcalendar
          :data="myEvents"
          :theme="myTheme"
          :themeVariant="myThemeVariant"
          :view="myView"
        />
      </div>
    </div>
  </MbscPage>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
</style>
```

## Implementation notes

- Use `view: { calendar: { labels: true } }`. 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`. React/Angular/Vue: change either at runtime by updating the bound `theme`/`themeVariant` prop value. JS/jQuery: call `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')`. Angular: use `HttpClient.jsonp()` instead. JS/jQuery: 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-vue.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 vue
   ```

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

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