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);
     },
   }
diff --git a/tests/unit/components/Qalendar.test.ts b/tests/unit/components/Qalendar.test.ts
index c7735ad4..fd16ccd0 100644
--- a/tests/unit/components/Qalendar.test.ts
+++ b/tests/unit/components/Qalendar.test.ts
@@ -480,4 +480,15 @@ describe('Qalendar.vue', () => {
     month.vm.$emit('updated-period', { start: new Date(), end: new Date(), selectedDate: new Date() })
     expect(wrapper.vm.mode).toBe('day')
   })
+
+  it('should invoke the goToPeriod method in the header', () => {
+    const wrapper = mount(Qalendar)
+    const header = wrapper.findComponent({ name: 'AppHeader' })
+    const goToPeriodSpy = vi.spyOn(header.vm, 'goToPeriod')
+    const expectedDirection = 'forward'
+
+    wrapper.vm.goToPeriod(expectedDirection)
+
+    expect(goToPeriodSpy).toHaveBeenCalledWith(expectedDirection)
+  })
 })