Vue component using v-calendar with a custom “Prev” and "Next" button in the header.

CalendarExample.vue

<!-- This code defines a Vue component that uses the v-calendar library to display a calendar with a custom "Prev" and "Next" button in the header -->
<script setup lang="ts">
const handleClickPrev = (props: any) => {
    console.log('[handleClickPrev props]', props);
}

const handleClickNext = (props: any) => {
    console.log('[handleClickNext props]', props);
}

</script>

<template>
    <h1>Logs the slot props to the console when back/previous button is clicked</h1>
    <div id="app">
        <div class="container">
            <VCalendar class="my-calendar">
                <template #header-prev-button="props">
                    <button @click="handleClickPrev(props)">Prev</button>
                </template>
                <template #header-next-button="props">
                    <button @click="handleClickNext(props)">Next</button>
                </template>
            </VCalendar>
        </div>
    </div>
</template>

<style>
</style>