<template>
    <QCalendarMonth
        ref="calendarRef"
        v-model="selectedDate"
        v-bind="$attrs"
        show-work-weeks
        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
        animated
        bordered
        mini-mode
        @change="onChange"
        @moved="onMoved"
        @click-date="onClickDate"
        @click-day="onClickDay"
        @click-workweek="onClickWorkweek"
        @click-head-workweek="onClickHeadWorkweek"
        @click-head-day="onClickHeadDay"
        style="max-width: 300px"
    />
</template>
<script setup>
import { ref } from 'vue';
import { QCalendarMonth, today } from '@quasar/quasar-ui-qcalendar/src/index.js';
import '@quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass';
import '@quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass';
import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';

const calendarRef = ref(null);
const selectedDate = ref(today());

const onToday = () => {
    calendarRef.value.moveToToday();
};
const onPrev = () => {
    calendarRef.value.prev();
};
const onNext = () => {
    calendarRef.value.next();
};
const onMoved = (data) => {
    console.log('onMoved', data);
};
const onChange = (data) => {
    console.log('onChange', data);
};
const onClickDate = (data) => {
    console.log('onClickDate', data);
};
const onClickDay = (data) => {
    console.log('onClickDay', data);
};
const onClickWorkweek = (data) => {
    console.log('onClickWorkweek', data);
};
const onClickHeadDay = (data) => {
    console.log('onClickHeadDay', data);
};
const onClickHeadWorkweek = (data) => {
    console.log('onClickHeadWorkweek', data);
};
</script>
