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>