From aa8e052633ca66d4c9cb4e2d65d7cfe0193e6a65 Mon Sep 17 00:00:00 2001 From: wbuezas <wbuezas@verdnatura.es> Date: Thu, 21 Mar 2024 11:15:18 -0300 Subject: [PATCH] QCalendar implementation test --- package.json | 1 + pnpm-lock.yaml | 7 ++++ src/components/common/VnCalendar.vue | 61 ++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 src/components/common/VnCalendar.vue diff --git a/package.json b/package.json index a35020b66..94d6b556f 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "dependencies": { "@quasar/cli": "^2.3.0", "@quasar/extras": "^1.16.9", + "@quasar/quasar-ui-qcalendar": "4.0.0-beta.19", "axios": "^1.4.0", "chromium": "^3.0.3", "croppie": "^2.6.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3fe7df55..9feb28aaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: '@quasar/extras': specifier: ^1.16.9 version: 1.16.9 + '@quasar/quasar-ui-qcalendar': + specifier: 4.0.0-beta.19 + version: 4.0.0-beta.19 axios: specifier: ^1.4.0 version: 1.6.7 @@ -939,6 +942,10 @@ packages: - vite dev: true + /@quasar/quasar-ui-qcalendar@4.0.0-beta.19: + resolution: {integrity: sha512-BT0G2JjgKl1bqNrY5utcYeoy8gK+U9k3Pz1YDi1OB265W/jHU6nFoWMEUdY3JdvMccwkXTL2DLVyl3eqAUyLyg==} + dev: false + /@quasar/render-ssr-error@1.0.3: resolution: {integrity: sha512-A8RF99q6/sOSe1Ighnh5syEIbliD3qUYEJd2HyfFyBPSMF+WYGXon5dmzg4nUoK662NgOggInevkDyBDJcZugg==} engines: {node: '>= 16'} diff --git a/src/components/common/VnCalendar.vue b/src/components/common/VnCalendar.vue new file mode 100644 index 000000000..7403fc6ef --- /dev/null +++ b/src/components/common/VnCalendar.vue @@ -0,0 +1,61 @@ +<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>