VueDayCalendar
Open Source

Customization

Display additional dates for the current month.

Use showOutsideDays to display additional days.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'
</script>

<template>
  <VueDayCalendar show-outside-days/>
</template>
April 2025
SuMoTuWeThFrSa
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3

Use a fixed number of weeks

When showOutsideDays is turned on, use fixedWeeks to default to displaying six weeks each month. This will prevent the calendar from changing its height when navigating.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'
</script>

<template>
  <VueDayCalendar show-outside-days fixed-weeks/>
</template>
April 2025
SuMoTuWeThFrSa
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

Customize the month format

Use YearAndMonth to customize the format.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'

  const yearAndMonth = 'YYYY MM'
</script>

<template>
  <VueDayCalendar :year-and-month-format="yearAndMonth"/>
</template>
2025 04
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Customize the month range

Use minDate and maxDate to customize the month range.

<script setup lang="ts">
  import dayjs from 'dayjs'

  import VueDayCalendar from 'vue-day-calendar'

  const maxDate = dayjs().add(2, 'month').format('YYYY-MM-DD')
  const minDate = dayjs().subtract(2, 'month').format('YYYY-MM-DD')
</script>

<template>
  <VueDayCalendar :max-date :min-date/>
</template>
2025-06-04maxDate
2025-02-04minDate
April 2025
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Should the button to switch months be displayed

Use disableNavigation to display the button for switching months.

<script setup lang="ts">
  import VueDayCalendar from 'vue-day-calendar'

  const disableNavigation = ref(true)
</script>

<template>
  <div>
    <button class="btn" @click="disableNavigation = !disableNavigation">
      Toggle Disable Navigation
    </button>
    <VueDayCalendar :disable-navigation/>
  </div>
</template>
April 2025
SuMoTuWeThFrSa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30