If you want to enable switching between week & month view, you can do it by adding a segmented control to the header and dynamically change the calendarType option. If you are not looking for dynamic switching you can configure a week calendar or a month calendar.
Demo
<script setup>
const myCalendarType = ref('week')
</script>
<template>
<MbscDatepicker :controls="['calendar']" :calendarType="myCalendarType" :calendarSize="1">
<template #header>
<MbscCalendarNav class="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>
<MbscCalendarPrev />
<MbscCalendarNext />
</template>
</MbscDatepicker>
</template>
<style>
.custom-view {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-moz-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
.mbsc-segmented {
margin: 0;
}
.mbsc-segmented.mbsc-material,
.mbsc-segmented.mbsc-windows {
padding: 0 2px;
}
.mbsc-segmented .mbsc-segmented-button {
padding: 0 1px;
}
.mbsc-segmented .mbsc-icon {
font-size: 20px;
}
.mbsc-segmented-button.mbsc-windows {
border: 0;
}
}
.custom-view-nav .mbsc-calendar-title.mbsc-material {
font-size: 16px;
}
</style>SFC JSSFC TS
<script setup>
import {
MbscCalendarNav,
MbscCalendarNext,
MbscCalendarPrev,
MbscDatepicker,
MbscSegmented,
MbscSegmentedGroup,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myCalendarType = ref('week')
</script>
<template>
<MbscDatepicker
display="inline"
:controls="['calendar']"
:calendarType="myCalendarType"
:calendarSize="1"
>
<template #header>
<MbscCalendarNav class="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>
<MbscCalendarPrev />
<MbscCalendarNext />
</template>
</MbscDatepicker>
</template>
<style>
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
</style><script setup lang="ts">
import {
MbscCalendarNav,
MbscCalendarNext,
MbscCalendarPrev,
MbscDatepicker,
MbscSegmented,
MbscSegmentedGroup,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const myCalendarType = ref<'month' | 'week'>('week')
</script>
<template>
<MbscDatepicker
display="inline"
:controls="['calendar']"
:calendarType="myCalendarType"
:calendarSize="1"
>
<template #header>
<MbscCalendarNav class="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>
<MbscCalendarPrev />
<MbscCalendarNext />
</template>
</MbscDatepicker>
</template>
<style>
.custom-view .mbsc-segmented .mbsc-icon {
font-size: 20px;
}
</style>