Scroll Direction, Week Numbers & Outer Days
The calendar view can be customized with a couple of different parameters:
- Set a month change direction - specify
'horizontal'or'vertical'in thecalendarScrolloption - Set the first day of the week - specify the first day of the week using the
firstDayoption, where Sunday is 0, Monday is 1, etc. - Show week numbers - set the
showWeekNumbersto true and show a week counter starting from the first week of every year - Hide the outer days of a month - set the
showOuterDaysto false in case you don't want to see days from previous and next months
Demo
Set a scrolling direction
Set the first day of week to
Annual week numbers
Show week counter
Outer days (Hidden by default for vertical, visible by default for horizontal)
Show outer days
<template>
<MbscDatepicker
calendarScroll="horizontal "
:firstDay="1 "
:showWeekNumbers="false "
:showOuterDays="true "
/>
</template>SFC JSSFC TS
<script setup>
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker
:controls="['calendar']"
:showWeekNumbers="true"
:showOuterDays="true"
calendarScroll="horizontal"
display="inline"
/>
</template>
<script setup lang="ts">
import { MbscDatepicker, setOptions } from '@mobiscroll/vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker
:controls="['calendar']"
:showWeekNumbers="true"
:showOuterDays="true"
calendarScroll="horizontal"
display="inline"
/>
</template>