Custom Header

You can customize how the header of the scheduler looks and how the components are arranged. Besides that you can also add custom functionality, like a segmented control that lets people switch between scheduler and calendar.

Use the header template for passing a custom header layout. There are predefined components - shorthands if you will - that can be used to assemble the header:

  • 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. This example sets a consistent order and layout across all themes and shows a custom control at the far right end.

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 .md-header-filter-prev { order: 1; }
            .mbsc-material .md-header-filter-next { order: 2; }
            .mbsc-material .md-header-filter-controls { order: 3; }
            .mbsc-material .md-header-filter-today { order: 4; }
Want to add a filter to the header?  Check out the next example →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Arrange navigation controls and add a scheduler/calendar view-switcher in a custom Scheduler header.

Code

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

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

const myEvents = ref([])
const currentDate = ref(new Date())
const view = ref('schedule')
const calView = ref({
  scheduler: { type: 'week' }
})

function getFirstDayOfWeek(d, prev) {
  const day = d.getDay()
  const diff = d.getDate() - day + (prev ? -7 : 7)
  return new Date(d.setDate(diff))
}

function navigatePage(prev) {
  const newCurrentDate = currentDate.value
  if (view.value === 'calendar') {
    const prevNextPage = new Date(
      newCurrentDate.getFullYear(),
      newCurrentDate.getMonth() + (prev ? -1 : 1),
      1
    )
    currentDate.value = prevNextPage
  } else {
    const prevNextSunday = getFirstDayOfWeek(newCurrentDate, prev)
    currentDate.value = prevNextSunday
  }
}

function changeView() {
  switch (view.value) {
    case 'calendar':
      calView.value = {
        calendar: { labels: true }
      }
      break
    case 'schedule':
      calView.value = {
        scheduler: { type: 'week' }
      }
      break
  }
}

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

<template>
  <MbscEventcalendar
    :data="myEvents"
    :view="calView"
    :selectedDate="currentDate"
    className="md-custom-header"
  >
    <template #header>
      <MbscCalendarNav className="md-custom-header-nav"></MbscCalendarNav>
      <div class="md-custom-header-controls">
        <MbscButton
          @click="navigatePage(true)"
          icon="material-arrow-back"
          variant="flat"
          className="md-custom-header-button"
        ></MbscButton>
        <MbscCalendarToday className="md-custom-header-today"></MbscCalendarToday>
        <MbscButton
          @click="navigatePage(false)"
          icon="material-arrow-forward"
          variant="flat"
          className="md-custom-header-button"
        ></MbscButton>
      </div>
      <div class="md-custom-header-view">
        <MbscSegmentedGroup v-model="view" @change="changeView()">
          <MbscSegmented value="schedule" v-model="view" icon="material-list"></MbscSegmented>
          <MbscSegmented value="calendar" v-model="view" icon="calendar"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
    </template>
  </MbscEventcalendar>
</template>

<style>
.md-custom-header-controls {
  display: flex;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
}

.md-custom-header-nav,
.md-custom-header-view {
  width: 180px;
}

.md-custom-header-button.mbsc-button {
  font-size: 20px;
  height: auto;
  padding: 0;
  margin: 0;
}

.md-custom-header .mbsc-segmented {
  width: 110px;
  float: right;
  margin-top: 0;
  margin-bottom: 0;
}

.md-custom-header .mbsc-material.mbsc-segmented,
.md-custom-header .mbsc-windows.mbsc-segmented {
  padding: 0;
}

.md-custom-header .mbsc-segmented .mbsc-segmented-button {
  font-size: 20px;
  height: 32px;
  padding: 0;
}
</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.