---
title: "Vue Scheduler Resource Filtering in Header Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/vue/scheduler/resource-filtering-in-header"
---

# Resource Filtering in Header - Vue Scheduler demo

Add a segmented resource filter to the Vue Scheduler header — place it between navigation buttons to let users switch resources inline. For Vue and Nuxt.

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

## Description

The header of the scheduler is a canvas and an opportunity for customization. You can add custom components and enable new interaction in context.

Such an example would be a custom filter block created with the help of a segmented control and placed between the standard UI components, which are:

- **Navigation component** - `<MbscCalendarNav />`. Use the `.md-header-filter-controls` CSS class for custom overrides.
- **Today button** - `<MbscCalendarToday />`. Use the `.md-header-filter-today` CSS class for custom overrides.
- **Previous month button** - `<MbscCalendarPrev />`. Use the `.md-header-filter-prev` CSS class for custom overrides.
- **Next month button** - `<MbscCalendarNext />`. Use the `.md-header-filter-next` CSS class for custom overrides.

For changing the order the controls are laid out, you only need to set up the `header` template.

### Overriding the order for specific themes

For a custom order on a theme to theme basis, you will need to use a little CSS. [Flex layout](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) makes reordering easy. It's just a matter of setting the order in CSS. For material use the `.mbsc-material`, for windows the `.mbsc-windows` prefix and for iOS it is `.mbsc-ios` class. Eg.:

```css
.mbsc-material .mds-header-filter-prev { order: 1; }
            .mbsc-material .mds-header-filter-next { order: 2; }
            .mbsc-material .mds-header-filter { order: 3; }
            .mbsc-material .mds-header-filter-today { order: 4; }
```

**Want to style and reorder the header?** [Take a look at the previous example →](https://demo.mobiscroll.com/vue/scheduler/customizing-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.
- **Header layout** The current month and year are shown on the left, a segmented resource filter is centered in the header, and blue month navigation arrows with a `Today` button between them on the right.
- **Resource filter** The segmented control contains three selectable options: `Barry`, `Hortense`, and `Carl`, each with an avatar shown before the name.
- **Resource filtering** Selecting a resource from the segmented control, updates the scheduler view to show that person's events, making it possible to show or hide events by resource from the header.
- **Color coding** `Barry`'s option and events use green, `Hortense` uses blue, and `Carl` uses pink, so the active filter and the visible events stay visually aligned.
- **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

- **Resource-specific planning** Viewing one person's schedule at a time without leaving the scheduler view.
- **Team calendars with simple filtering** Switching between a small set of people or resources from a compact header control.
- **Color-coded resource views** Making it easy to distinguish which events belong to which resource.
- **Operational dashboards** Internal scheduling tools where users need quick filtering.
- **Custom scheduler toolbars** Cases where the standard header needs extra controls without moving filtering outside the scheduler.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`cssClass`](https://mobiscroll.com/docs/vue/forms/segmented#opt-cssClass) - option
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

```vue
<script setup>
import {
  getJson,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const filteredEvents = ref([])
const myEvents = ref([])
const selectedResources = ref([1])
const isToastOpen = ref(false)
const toastMessage = ref('')

const myView = { scheduler: { type: 'week' } }

const myResources = [
  {
    id: 1,
    name: 'Barry',
    color: '#328e39',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Hortense',
    color: '#00aabb',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'Carl',
    color: '#ea72c0',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  }
]

function handleChange(ev) {
  const value = +ev.target.value
  const checked = ev.target.checked
  const resource = myResources.find((r) => r.id === value)

  filteredEvents.value = myEvents.value.filter(
    (e) => selectedResources.value.indexOf(e.participant) !== -1
  )
  toastMessage.value =
    (checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events'
  isToastOpen.value = true
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/custom-events/',
    (events) => {
      myEvents.value = events.map((e) => {
        e.color = myResources.find((r) => r.id === e.participant).color
        return e
      })
      filteredEvents.value = myEvents.value.filter(
        (e) => selectedResources.value.indexOf(e.participant) !== -1
      )
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    :clickToCreate="false"
    :dragToCreate="false"
    :dragToMove="true"
    :dragToResize="true"
    :data="filteredEvents"
    :view="myView"
  >
    <template #header>
      <MbscCalendarNav class="mds-header-filter-nav" />
      <div class="mds-header-filter mbsc-flex-1-0">
        <MbscSegmentedGroup select="multiple" v-model="selectedResources" @change="handleChange">
          <MbscSegmented
            v-for="res in myResources"
            :cssClass="'mds-header-filter-' + res.id"
            :key="res.id"
            :value="res.id"
          >
            <img class="mds-header-filter-img" :alt="res.name" :src="res.img" />
            <span class="mds-header-filter-name"> {{ res.name }}</span>
          </MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev className="mds-header-filter-prev" />
      <MbscCalendarToday className="mds-header-filter-today" />
      <MbscCalendarNext className="mds-header-filter-next" />
    </template>
  </MbscEventcalendar>
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>

<style>
.mds-header-filter-nav {
  width: 180px;
}

.mds-header-filter-img {
  width: 25px;
}

.mds-header-filter-name {
  margin-left: 10px;
}

.mds-header-filter .mbsc-segmented {
  max-width: 400px;
  margin: 0 auto;
}

.mds-header-filter .mbsc-segmented-button.mbsc-selected {
  color: #fff;
}

.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-1 .mbsc-segmented-selectbox-inner {
  background: #328e39;
}

.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-2 .mbsc-segmented-selectbox-inner {
  background: #00aabb;
}

.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-3 .mbsc-segmented-selectbox-inner {
  background: #ea72c0;
}

.mbsc-material .mds-header-filter-prev {
  order: 1;
}

.mbsc-material .mds-header-filter-next {
  order: 2;
}

.mbsc-material .mds-header-filter {
  order: 3;
}

.mbsc-material .mds-header-filter-today {
  order: 4;
}
</style>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscCalendarNav,
  MbscCalendarNext,
  MbscCalendarPrev,
  MbscCalendarToday,
  MbscEventcalendar,
  MbscSegmented,
  MbscSegmentedGroup,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const filteredEvents = ref<MbscCalendarEvent[]>([])
const myEvents = ref<MbscCalendarEvent[]>([])
const selectedResources = ref([1])
const isToastOpen = ref(false)
const toastMessage = ref('')

const myView: MbscEventcalendarView = { scheduler: { type: 'week' } }

const myResources: MbscResource[] = [
  {
    id: 1,
    name: 'Barry',
    color: '#328e39',
    img: 'https://img.mobiscroll.com/demos/m1.png'
  },
  {
    id: 2,
    name: 'Hortense',
    color: '#00aabb',
    img: 'https://img.mobiscroll.com/demos/f1.png'
  },
  {
    id: 3,
    name: 'Carl',
    color: '#ea72c0',
    img: 'https://img.mobiscroll.com/demos/m2.png'
  }
]

function handleChange(ev: Event) {
  const target = ev.target as HTMLInputElement
  const value = +target.value
  const checked = target.checked
  const resource = myResources.find((r) => r.id === value)

  filteredEvents.value = myEvents.value.filter(
    (e) => selectedResources.value.indexOf(e.participant) !== -1
  )
  toastMessage.value =
    (checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events'
  isToastOpen.value = true
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/custom-events/',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events.map((e) => {
        e.color = myResources.find((r) => r.id === e.participant)!.color
        return e
      })
      filteredEvents.value = myEvents.value.filter(
        (e) => selectedResources.value.indexOf(e.participant) !== -1
      )
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    :clickToCreate="false"
    :dragToCreate="false"
    :dragToMove="true"
    :dragToResize="true"
    :data="filteredEvents"
    :view="myView"
  >
    <template #header>
      <MbscCalendarNav class="mds-header-filter-nav" />
      <div class="mds-header-filter mbsc-flex-1-0">
        <MbscSegmentedGroup select="multiple" v-model="selectedResources" @change="handleChange">
          <MbscSegmented
            v-for="res in myResources"
            :cssClass="'mds-header-filter-' + res.id"
            :key="res.id"
            :value="res.id"
          >
            <img class="mds-header-filter-img" :alt="res.name" :src="res.img" />
            <span class="mds-header-filter-name"> {{ res.name }}</span>
          </MbscSegmented>
        </MbscSegmentedGroup>
      </div>
      <MbscCalendarPrev className="mds-header-filter-prev" />
      <MbscCalendarToday className="mds-header-filter-today" />
      <MbscCalendarNext className="mds-header-filter-next" />
    </template>
  </MbscEventcalendar>
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</template>

<style>
.mds-header-filter-nav {
  width: 180px;
}

.mds-header-filter-img {
  width: 25px;
}

.mds-header-filter-name {
  margin-left: 10px;
}

.mds-header-filter .mbsc-segmented {
  max-width: 400px;
  margin: 0 auto;
}

.mds-header-filter .mbsc-segmented-button.mbsc-selected {
  color: #fff;
}

.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-1 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-1 .mbsc-segmented-selectbox-inner {
  background: #328e39;
}

.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-2 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-2 .mbsc-segmented-selectbox-inner {
  background: #00aabb;
}

.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-material,
.mds-header-filter-3 .mbsc-button.mbsc-selected.mbsc-windows,
.mds-header-filter-3 .mbsc-segmented-selectbox-inner {
  background: #ea72c0;
}

.mbsc-material .mds-header-filter-prev {
  order: 1;
}

.mbsc-material .mds-header-filter-next {
  order: 2;
}

.mbsc-material .mds-header-filter {
  order: 3;
}

.mbsc-material .mds-header-filter-today {
  order: 4;
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'week' } }`. Set `clickToCreate: false`, `dragToCreate: false`, `dragToMove: true`, `dragToResize: true`. No `resources` array is passed to the calendar - the people are used only for client-side event filtering, not as resource rows.
- Define 3 people at module level: Barry (id `1`, color `#328e39`, avatar `m1.png`), Hortense (id `2`, color `#00aabb`, avatar `f1.png`), Carl (id `3`, color `#ea72c0`, avatar `m2.png`).
- Load events from `https://trial.mobiscroll.com/custom-events/` via JSONP. Each event has a `participant` field (integer id matching a person). After loading, assign `event.color` from the matching person's color. Initial selection is person `1` only - pass only the matching events as `data` (or call `inst.setEvents(filteredEvents)` for the imperative API).
- Track `selectedResources` (the set of active participant ids). On every filter change, recompute: `myEvents.filter(e => selectedResources includes e.participant)` and update `data` (imperative: `inst.setEvents(filteredEvents)`). Show a toast: "Showing [Name] events" or "Hiding [Name] events".
- **Custom header** (`renderHeader` / Angular: `headerTemplate` / Vue: `#header` slot): place `CalendarNav` (class `mds-header-filter-nav`) on the left, then a flex div (`mds-header-filter mbsc-flex-1-0`) containing a multi-select `SegmentedGroup` with one `Segmented` per person - each shows the person's avatar and name, and carries `cssClass: 'mds-header-filter-{id}'` for per-person highlight color. Then `CalendarPrev`, `CalendarToday`, `CalendarNext` on the right.
- Each person's active segment is highlighted in their color via `mds-header-filter-{id}` CSS targeting `.mbsc-segmented-selectbox-inner` (iOS) and `.mbsc-button.mbsc-selected.mbsc-material` / `.mbsc-windows` (other themes).

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

## Related demos

- Previous: [CSS Classes for Cell Colors and Blocked Times](https://demo.mobiscroll.com/vue/scheduler/colors-invalids-css-class.md) - Apply custom CSS classes to color-code Vue Scheduler cells and style blocked times - add patterns or backgrounds for days or periods.
- Next: [Themes — iOS, Material & Windows](https://demo.mobiscroll.com/vue/scheduler/themes-ios-material-windows.md) - Preview iOS, Material, and Windows themes on the Vue Scheduler — toggle light/dark mode, customize colors with the theme builder, or use CSS overrides.