diff --git a/src/components/Calendar/CalendarHeader.vue b/src/components/Calendar/CalendarHeader.vue
index 1d098e1e3..46d039472 100644
--- a/src/components/Calendar/CalendarHeader.vue
+++ b/src/components/Calendar/CalendarHeader.vue
@@ -61,28 +61,19 @@ const props = defineProps<{
 const {
   navPopoverId,
   navVisibility,
+  navPopoverPlacement,
   canMovePrev,
   movePrev,
   canMoveNext,
   moveNext,
 } = useCalendar();
 
-const navPlacement = computed(() => {
-  switch (props.page.titlePosition) {
-    case 'left':
-      return 'bottom-start';
-    case 'right':
-      return 'bottom-end';
-    default:
-      return 'bottom';
-  }
-});
 const navPopoverOptions = computed(() => {
   const { page } = props;
   return {
     id: navPopoverId.value,
     visibility: navVisibility.value,
-    placement: navPlacement.value,
+    placement: navPopoverPlacement.value,
     modifiers: [{ name: 'flip', options: { fallbackPlacements: ['bottom'] } }],
     data: { page },
     isInteractive: true,
diff --git a/src/components/CalendarGrid/CalendarGrid.vue b/src/components/CalendarGrid/CalendarGrid.vue
index 32cbc296b..a9010afc8 100755
--- a/src/components/CalendarGrid/CalendarGrid.vue
+++ b/src/components/CalendarGrid/CalendarGrid.vue
@@ -104,7 +104,7 @@
                     tabindex="1"
                     role="button"
                     class="vc-grid-header-day-number vc-focusable"
-                    :class="`id-${day.id}`"
+                    :class="`id-${String(day.id)}`"
                     @click="onDayNumberClick(day)"
                     @keydown="onDayKeydown(day, $event)"
                     @keydown.space.enter="onDayNumberClick(day)"
diff --git a/src/use/calendar.ts b/src/use/calendar.ts
index 3a0222b10..9550dabd9 100755
--- a/src/use/calendar.ts
+++ b/src/use/calendar.ts
@@ -108,6 +108,9 @@ export const propsDef = {
     type: String as PropType<PopoverVisibility>,
     default: () => getDefault('navVisibility') as PopoverVisibility,
   },
+  navPopoverPlacement: {
+    type: String,
+  },
   showWeeknumbers: [Boolean, String],
   showIsoWeeknumbers: [Boolean, String],
   expanded: Boolean,
@@ -197,6 +200,17 @@ export function createCalendar(
   );
 
   const navVisibility = computed(() => props.navVisibility);
+  const navPopoverPlacement = computed(() => {
+    if (props.navPopoverPlacement) return props.navPopoverPlacement;
+    switch (props.titlePosition) {
+      case 'left':
+        return 'bottom-start';
+      case 'right':
+        return 'bottom-end';
+      default:
+        return 'bottom';
+    }
+  });
 
   const showWeeknumbers = computed(() => !!props.showWeeknumbers);
 
@@ -748,6 +762,7 @@ export function createCalendar(
     isWeekly,
     isDaily,
     navVisibility,
+    navPopoverPlacement,
     showWeeknumbers,
     showIsoWeeknumbers,
     getDateAddress,