diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 7479a144f..be8166c0a 100644
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -53,6 +53,7 @@ export declare class Calendar extends Vue {
     manualInput?: boolean;
     locale?: LocaleSettings;
     ariaLabelledBy?: string;
+    appendTo?: string;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $emit(eventName: 'month-change', e: { month: number, year: number }): this;
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 75fb262fc..b24783112 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -316,6 +316,10 @@ export default {
         ariaLabelledBy: {
             type: String,
             default: null
+        },
+        appendTo: {
+            type: String,
+            default: null
         }
     },
     oldViewDate: null,
@@ -344,6 +348,7 @@ export default {
             this.mask = null;
         }
 
+        this.restoreAppend();
         this.unbindOutsideClickListener();
     },
     data() {
@@ -530,6 +535,7 @@ export default {
             if (this.autoZIndex) {
                 this.$refs.overlay.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             }
+            this.appendContainer();
             this.alignOverlay();
             this.$emit('show');
         },
@@ -648,7 +654,10 @@ export default {
                 this.enableModality();
             }
             else if (this.$refs.overlay) {
-                DomHandler.relativePosition(this.$refs.overlay, this.$el);
+                if (this.appendTo)
+                    DomHandler.absolutePosition(this.$refs.overlay, this.$el);
+                else
+                    DomHandler.relativePosition(this.$refs.overlay, this.$el);
             }
         },
         onButtonClick() {
@@ -1867,6 +1876,22 @@ export default {
                     //Noop
                 break;
              }
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.overlay && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
+            }
         }
     },
     computed: {
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index a960356b3..3f74d7a75 100644
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -407,6 +407,12 @@ export default {
                                 <td>null</td>
                                 <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                             </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Id of the element or "body" for document where the overlay should be appended to.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>