VueDayCalendar
Open Source

Select Month

tips: you can open the console to view the print log.

Month Change

When you select a month, you can get the selected month by listening to the @change event.

<script setup lang="ts">
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  import type { EventChange } from 'vue-day-calendar'

  import 'vue-day-calendar/style.css'
  import VueDayCalendar from 'vue-day-calendar'

  const month = ref('2023-04')

  function handleMonth(value: string) {
    month.value = value
  }

  function monthChange(value: EventChange) {
    console.log('month change value', value)
  }
  function goToToday() {
    month.value = dayjs().format('YYYY-MM')
  }
</script>

<template>
  <div>
    <div class="mb-4" flex="~ justify-between">
      <button class="btn" @click="handleMonth('2023-01')">
        2023-01
      </button>
      <button class="btn" @click="goToToday">
        Go to Today
      </button>
    </div>
    <VueDayCalendar :month @change="monthChange">
      <template #footer>
        <span class="text-sm">the current month is：{{ month }}</span>
      </template>
    </VueDayCalendar>
  </div>
</template>
April 2023
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
current month: 2023-04

v-model Month

For convenience, you can also responsively change the value of month through v-model:month.

<script setup lang="ts">
  import { ref } from 'vue'
  import dayjs from 'dayjs'

  import 'vue-day-calendar/style.css'
  import VueDayCalendar from 'vue-day-calendar'

  const month = ref('2023-04')

  function handleMonth(value: string) {
    month.value = value
  }

  function goToToday() {
    month.value = dayjs().format('YYYY-MM')
  }
</script>

<template>
  <div>
    <div class="mb-4" flex="~ justify-between">
      <button class="btn" @click="handleMonth('2023-01')">
        2023-01
      </button>
      <button class="btn" @click="goToToday">
        Go to Today
      </button>
    </div>
    <VueDayCalendar v-model:month="month">
      <template #footer>
        <span class="text-sm">the current month is：{{ month }}</span>
      </template>
    </VueDayCalendar>
  </div>
</template>
April 2023
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
current month: 2023-04