diff --git a/package.json b/package.json
index c3fa84f9991..be103528373 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,6 @@
     "patchedDependencies": {
       "@adobe/leonardo-contrast-colors@1.0.0-alpha.16": "patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch",
       "jest-serializer-vue-tjw@3.19.0": "patches/jest-serializer-vue-tjw@3.19.0.patch",
-      "v-calendar@2.3.4": "patches/v-calendar@2.3.4.patch",
       "vue-gettext@2.1.12": "patches/vue-gettext@2.1.12.patch"
     }
   },
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 03cb64e54d2..224f12666ae 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -106,7 +106,7 @@
     "tippy.js": "^6.3.7",
     "typescript": "^4.3.2",
     "url-loader": "^4.1.1",
-    "v-calendar": "^2.3.4",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue-gettext": "^2.1.12",
     "vue-inline-svg": "^2.0.0",
     "vue-jest": "^3.0.4",
@@ -134,7 +134,7 @@
     "postcss-import": "^12.0.1",
     "postcss-url": "^9.0.0",
     "tippy.js": "^6.3.7",
-    "v-calendar": "^2.3.4",
+    "v-calendar": "github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d",
     "vue": "3.2.45",
     "vue-inline-svg": "^2.0.0",
     "vue-select": "^3.12.0",
diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts b/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
index 26b1f3c1730..c5270dfa3bb 100644
--- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
+++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.spec.ts
@@ -1,16 +1,16 @@
-import { shallowMount } from 'web-test-helpers'
-
 import Datepicker from './OcDatepicker.vue'
-
-const slotDefault = "<button id='default-slot'>Open datepicker</button>"
+import { mount } from 'web-test-helpers'
 
 describe('OcDatePicker', () => {
   it('renders default scoped slot', () => {
-    const wrapper = shallowMount(Datepicker, {
+    const slotDefault = "<button id='default-slot'>Open datepicker</button>"
+    const wrapper = mount(Datepicker, {
       slots: { default: slotDefault },
-      props: { value: null }
+      props: { value: null },
+      global: {
+        renderStubDefaultSlot: true
+      }
     })
-
     expect(wrapper.find('#default-slot').exists()).toBeTruthy()
   })
 })
diff --git a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
index afcc4412c89..a4e8dbf208e 100644
--- a/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
+++ b/packages/design-system/src/components/OcDatepicker/OcDatepicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <date-picker class="oc-datepicker" v-bind="$attrs" v-on="$listeners">
+  <date-picker class="oc-datepicker" v-bind="$attrs">
     <template #default="{ inputValue, togglePopover, hidePopover }">
       <!-- @slot Default slot to use as the popover anchor for datepicker -->
       <slot :input-value="inputValue" :toggle-popover="togglePopover" :hide-popover="hidePopover" />
@@ -7,13 +7,20 @@
   </date-picker>
 </template>
 
-<script>
-import DatePicker from 'v-calendar/lib/components/date-picker.umd'
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { DatePicker } from 'v-calendar'
+import 'v-calendar/dist/style.css'
 
 /**
  * Datepicker component based on [v-calendar](https://vcalendar.io/). For detailed documentation (props, slots, events, etc.), please visit https://vcalendar.io/api/v2.0/calendar.html
  */
-export default {
+export default defineComponent({
+  compatConfig: {
+    MODE: 3 // opt in to $listeners being included in $attrs
+  },
+
   name: 'OcDatepicker',
   status: 'ready',
   release: '1.0.0',
@@ -21,7 +28,7 @@ export default {
   components: { DatePicker },
 
   inheritAttrs: true
-}
+})
 </script>
 
 <style lang="scss">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 18c26bdbb79..eb913e77215 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,15 +3,12 @@ lockfileVersion: 5.4
 packageExtensionsChecksum: e5e8993047f00ffc73fd28e87ccaecb8
 
 patchedDependencies:
-  jest-serializer-vue-tjw@3.19.0:
-    hash: n3ezndisi6xx2kbxcsk5pv4dxy
-    path: patches/jest-serializer-vue-tjw@3.19.0.patch
   vue-gettext@2.1.12:
     hash: 6c2crj3kpnhb2sofrku4e7jhce
     path: patches/vue-gettext@2.1.12.patch
-  v-calendar@2.3.4:
-    hash: y3xp3q23722rnj6ewses6p57yq
-    path: patches/v-calendar@2.3.4.patch
+  jest-serializer-vue-tjw@3.19.0:
+    hash: n3ezndisi6xx2kbxcsk5pv4dxy
+    path: patches/jest-serializer-vue-tjw@3.19.0.patch
   '@adobe/leonardo-contrast-colors@1.0.0-alpha.16':
     hash: uknaqjiop66j4kgrr7nmysu5gi
     path: patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch
@@ -258,7 +255,7 @@ importers:
       tippy.js: ^6.3.7
       typescript: ^4.3.2
       url-loader: ^4.1.1
-      v-calendar: ^2.3.4
+      v-calendar: github:dschmidt/v-calendar#3ce6e3b8afd5491cb53ee811281d5fa8a45b044d
       vue: 3.2.45
       vue-gettext: ^2.1.12
       vue-inline-svg: ^2.0.0
@@ -344,7 +341,7 @@ importers:
       tippy.js: 6.3.7
       typescript: 4.8.4
       url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
-      v-calendar: 2.3.4_y3xp3q23722rnj6ewses6p57yq_mujcgr46otuklyppfst4qtxk6i
+      v-calendar: github.com/dschmidt/v-calendar/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d_vue@3.2.45
       vue: 3.2.45
       vue-gettext: 2.1.12_6c2crj3kpnhb2sofrku4e7jhce
       vue-inline-svg: 2.0.0
@@ -5368,6 +5365,10 @@ packages:
   /@popperjs/core/2.11.5:
     resolution: {integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==}
 
+  /@popperjs/core/2.4.0:
+    resolution: {integrity: sha512-NMrDy6EWh9TPdSRiHmHH2ye1v5U0gBD7pRYwSwJvomx7Bm4GG04vu63dYiVzebLOx2obPpJugew06xVP0Nk7hA==}
+    dev: true
+
   /@rollup/plugin-inject/5.0.2_rollup@3.7.0:
     resolution: {integrity: sha512-zRthPC/sZ2OaQwPh2LvFn0A+3SyMAZR1Vqsp89mWkIuGXKswT8ty1JWj1pf7xdZvft4gHZaCuhdopuiCwjclWg==}
     engines: {node: '>=14.0.0'}
@@ -21829,21 +21830,6 @@ packages:
     resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
     hasBin: true
 
-  /v-calendar/2.3.4_y3xp3q23722rnj6ewses6p57yq_mujcgr46otuklyppfst4qtxk6i:
-    resolution: {integrity: sha512-jH9cCuryt7++LWkHE4zvkqORQYUmmfLwhYxaDzndTrd3hWyLtm3WGyfanc++PEqchTkPP31VewFTXqlSf3Gk7Q==}
-    peerDependencies:
-      '@popperjs/core': ^2.4.0
-      vue: ^2.5.18
-    dependencies:
-      '@popperjs/core': 2.11.5
-      core-js: 3.26.1
-      date-fns: 2.25.0
-      date-fns-tz: 1.1.6_date-fns@2.25.0
-      lodash: 4.17.21
-      vue: 3.2.45
-    dev: true
-    patched: true
-
   /v8-compile-cache-lib/3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
     dev: true
@@ -23186,3 +23172,19 @@ packages:
     transitivePeerDependencies:
       - supports-color
     dev: false
+
+  github.com/dschmidt/v-calendar/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d_vue@3.2.45:
+    resolution: {tarball: https://codeload.github.com/dschmidt/v-calendar/tar.gz/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d}
+    id: github.com/dschmidt/v-calendar/3ce6e3b8afd5491cb53ee811281d5fa8a45b044d
+    name: v-calendar
+    version: 3.0.0-alpha.9
+    peerDependencies:
+      vue: ^3.1.0
+    dependencies:
+      '@popperjs/core': 2.4.0
+      '@types/lodash': 4.14.170
+      date-fns: 2.25.0
+      date-fns-tz: 1.1.6_date-fns@2.25.0
+      lodash: 4.17.21
+      vue: 3.2.45
+    dev: true