Week View
Show a week calendar instead of a monthly calendar view to save space. By setting the calendarType to 'week' and passing the count in the calendarSize option you can simply enable a week view.
You can dynamically change the number of weeks or switch between month and week view without the need for recycling the whole component.
Interested in switching week and month view? Learn how to set up switch inside the calendar →
Demo
Change the week count
<template>
<MbscDatepicker
calendarType="week"
:calendarSize="2 "
/>
</template>
SFC JSSFC TS
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="1" />
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="2" />
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="3" />
</template>
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="1" />
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="2" />
<MbscDatepicker :controls="['calendar']" display="inline" calendarType="week" :calendarSize="3" />
</template>