diff --git a/src/Qalendar.vue b/src/Qalendar.vue
index 168f5281..2dc7a56f 100644
--- a/src/Qalendar.vue
+++ b/src/Qalendar.vue
@@ -18,6 +18,7 @@
       </Transition>
 
       <AppHeader
+        ref="appHeader"
         :key="wasInitialized + mode"
         :config="config"
         :mode="mode"
@@ -335,7 +336,11 @@ export default defineComponent({
     handleDateWasClicked(payload: string) {
       this.$emit('day-was-clicked', payload); // TODO: remove with v4. day-was-clicked is deprecated
       this.$emit('date-was-clicked', payload);
-    }
+    },
+
+    goToPeriod(direction: 'previous' | 'next') {
+      (this.$refs.appHeader as typeof AppHeader).goToPeriod(direction);
+    },
   },
 });
 </script>
diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
index e5998164..2816e69b 100644
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@@ -12,13 +12,13 @@
         <FontAwesomeIcon
           class="calendar-header__chevron-arrow calendar-header__chevron-arrow-left"
           :icon="icons.chevronLeft"
-          @click="goToPeriod($event, 'previous')"
+          @click="goToPeriod('previous')"
         />
 
         <FontAwesomeIcon
           class="calendar-header__chevron-arrow calendar-header__chevron-arrow-right"
           :icon="icons.chevronRight"
-          @click="goToPeriod($event, 'next')"
+          @click="goToPeriod('next')"
         />
       </div>
 
@@ -188,7 +188,7 @@ export default defineComponent({
       this.$emit('updated-period', value);
     },
 
-    goToPeriod(event: MouseEvent, direction: 'previous' | 'next') {
+    goToPeriod(direction: 'previous' | 'next') {
       (this.$refs.periodSelect as typeof DatePicker).goToPeriod(direction);
     },
   }