Vue Event calendar Resource Filter in Header

The calendar view doesn't have built in resource listing, however we can easily solve that inside the header using the segmented component. The header of the agenda 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:

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 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.:

.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 →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Filter events by resource in the event calendar using a segmented control in the header — switch people or resources without a filter panel.

Code

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

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

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

const myView = { calendar: { labels: true } }

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.resource) !== -1
  )
  toastMessage.value =
    (checked ? 'Showing ' : 'Hiding ') + (resource ? resource.name : '') + ' events'
  isToastOpen.value = true
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/filter-resource-events/',
    (events) => {
      myEvents.value = events
      filteredEvents.value = myEvents.value.filter(
        (e) => selectedResources.value.indexOf(e.resource) !== -1
      )
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar
    :clickToCreate="false"
    :dragToCreate="false"
    :dragToMove="true"
    :dragToResize="true"
    :data="filteredEvents"
    :resources="myResources"
    :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>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.