Vue Calendar Custom Header

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

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 />.
  • Today button - <MbscCalendarToday />.
  • Previous month button - <MbscCalendarPrev />.
  • Next month button - <MbscCalendarNext />.
Get started with this example

Demo

Default header

The default header contains the two arrows on the far-right for previous and next months, while the current month indicator with the MbscCalendarNav component is placed to the far-left.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    :controls="['calendar']"
    :calendarSize="2"
    calendarType="week"/>
</template>
Custom header arrangement

You can reorder the controls and place the MbscCalendarNav in the middle with the two arrows - MbscCalendarPrev and MbscCalendarNext - to the sides.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker :controls="['calendar']">
    <template #header>
      <MbscCalendarPrev cssClass="custom-prev" />
      <MbscCalendarNav cssClass="custom-nav" />
      <MbscCalendarNext cssClass="custom-next" />
    </template>
  </MbscDatepicker>
</template>
Add a today button

You can also add a custom component, like a MbscCalendarToday button.

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker :controls="['calendar']">
    <template #header>
      <MbscCalendarNav />
      <div class="custom-buttons">
        <MbscCalendarPrev />
        <MbscCalendarToday />
        <MbscCalendarNext />
      </div>
    </template>
  </MbscDatepicker>
</template>
Switch between week and month view

Use a segmented component for creating a view switcher.

Javascript jQuery Angular React Vue 
<script setup>
const myCalendarType = ref('week')
</script>
<template>
  <MbscDatepicker :controls="['calendar']" :calendarType="myCalendarType" :calendarSize="2">
    <template #header>
      <MbscCalendarNav cssClass="custom-view-nav" />
      <div class="custom-view">
        <MbscSegmentedGroup v-model="myCalendarType">
          <MbscSegmented value="week" icon="material-date-range"></MbscSegmented>
          <MbscSegmented value="month" icon="material-event-note"></MbscSegmented>
        </MbscSegmentedGroup>
      </div>
    </template>
  </MbscDatepicker>
</template>
Preview the selection

Above all that you can give instructions or show the selected {value} in the header

Javascript jQuery Angular React Vue 
<template>
  <MbscDatepicker
    :controls="['calendar']"
    :calendarSize="2"
    calendarType="week"
    headerText="You selected {value}"
  >
</template>
Preview in fullscreen

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.