diff --git a/docs/.vuepress/components/Demo.vue b/docs/.vuepress/components/Demo.vue
index 8d123f61..84b9cfee 100755
--- a/docs/.vuepress/components/Demo.vue
+++ b/docs/.vuepress/components/Demo.vue
@@ -134,6 +134,40 @@
         <datepicker :calendar-button="true" :show-calendar-on-button-click="true"></datepicker>
       </code>
     </div>
+
+    <div class="example overflow-scroll">
+      <h3>Append datepicker to body</h3>
+      <Datepicker
+        :append-to-body="true"
+      />
+      <h3>Don't append datepicker to body</h3>
+      <Datepicker />
+      <code>
+        &lt;datepicker :append-to-body="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+
+    <div class="example">
+      <h3>Fixed positions</h3>
+      <Datepicker
+        :fixed-position="fixedPosition"
+      />
+      <code>
+        &lt;datepicker :fixed-position="fixedPosition"&gt;&lt;/datepicker&gt;
+      </code>
+      <div class="settings">
+        <h5>Settings</h5>
+        <select v-model="fixedPosition">
+          <option
+            v-for="(position) in fixedPositions"
+            :key="position"
+            :value="position"
+          >
+            {{ position }}
+          </option>
+        </select>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -146,6 +180,15 @@ export default {
       format: 'd MMMM yyyy',
       openDate: null,
       vModelExample: null,
+      fixedPositions: [
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'top',
+        'top-left',
+        'top-right',
+      ],
+      fixedPosition: 'bottom',
     }
   },
 }
diff --git a/docs/.vuepress/components/style.css b/docs/.vuepress/components/style.css
index df8d89d8..b8d27ca3 100644
--- a/docs/.vuepress/components/style.css
+++ b/docs/.vuepress/components/style.css
@@ -38,3 +38,7 @@
 .error {
   color: red;
 }
+
+.overflow-scroll {
+  overflow:scroll
+}
diff --git a/docs/guide/Props/README.md b/docs/guide/Props/README.md
index 4c7031c5..ab4f6067 100755
--- a/docs/guide/Props/README.md
+++ b/docs/guide/Props/README.md
@@ -3,6 +3,7 @@
 
 | Prop                          | Type             | Default     | Description                                     |
 | ----------------------------- | -----------------| ----------- | ----------------------------------------------- |
+| append-to-body                | Boolean          | false       | Append datepicker calendar to body              |
 | autofocus                     | String           |             | Sets html `autofocus` attribute on input        |
 | bootstrap-styling             | Boolean          | false       | Use bootstrap v4 styling classes.               |
 | calendar-button               | Boolean          | false       | Show an icon that that can be clicked           |
diff --git a/docs/guide/README.md b/docs/guide/README.md
index be7e9f2e..1f4ea15f 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -55,6 +55,6 @@ If you use [SASS](https://sass-lang.com/) you can directly import the src file.
 
 ```vue
 <style lang="scss">
-@import '~@sumcumo/vue-datepicker/src/styles/style.scss';
+@import '~@sum.cumo/vue-datepicker/src/styles/style.scss';
 </style>
 ```
diff --git a/example/Demo.vue b/example/Demo.vue
index 9d5d4cbd..bdb83a78 100755
--- a/example/Demo.vue
+++ b/example/Demo.vue
@@ -3,7 +3,10 @@
     <h1>Datepicker Examples</h1>
     <div class="example">
       <h3>Default datepicker...</h3>
-      <Datepicker placeholder="Select Date" />
+      <Datepicker
+        placeholder="Select Date"
+        :append-to-body="true"
+      />
       <code>
         &lt;datepicker placeholder="Select Date"&gt;&lt;/datepicker&gt;
       </code>
@@ -37,6 +40,7 @@
       <Datepicker
         v-model="vModelExample"
         placeholder="Select Date"
+        :append-to-body="true"
       />
       <code>
         &lt;datepicker placeholder="Select Date" v-model="vmodelexample"&gt;&lt;/datepicker&gt;
@@ -45,6 +49,18 @@
       <p>{{ vModelExample }}</p>
     </div>
 
+    <div class="example overflow-scroll">
+      <h3>Append datepicker to body</h3>
+      <Datepicker
+        :append-to-body="true"
+      />
+      <h3>Don't append datepicker to body</h3>
+      <Datepicker />
+      <code>
+        &lt;datepicker :append-to-body="true"&gt;&lt;/datepicker&gt;
+      </code>
+    </div>
+
     <div class="example">
       <h3>Format datepicker</h3>
       <Datepicker :format="format" />
@@ -294,6 +310,29 @@
         :initialView="'year'"&gt;&lt;/datepicker&gt;
       </code>
     </div>
+
+    <div class="example">
+      <h3>Fixed positions</h3>
+      <Datepicker
+        :fixed-position="fixedPosition"
+        :append-to-body="true"
+      />
+      <code>
+        &lt;datepicker :fixed-position="fixedPosition"&gt;&lt;/datepicker&gt;
+      </code>
+      <div class="settings">
+        <h5>Settings</h5>
+        <select v-model="fixedPosition">
+          <option
+            v-for="(position) in fixedPositions"
+            :key="position"
+            :value="position"
+          >
+            {{ position }}
+          </option>
+        </select>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -369,6 +408,15 @@ export default {
       vModelExample: null,
       languages: lang,
       language: 'en',
+      fixedPositions: [
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'top',
+        'top-left',
+        'top-right',
+      ],
+      fixedPosition: 'bottom',
     }
   },
   computed: {
@@ -499,4 +547,7 @@ h5 {
   font-size: 80%;
   display: block;
 }
+.overflow-scroll {
+  overflow:scroll
+}
 </style>
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
new file mode 100644
index 00000000..e5410cff
--- /dev/null
+++ b/src/components/Calendar.vue
@@ -0,0 +1,312 @@
+<template>
+  <div
+    ref="datepicker"
+    :class="[calendarClass, 'vdp-datepicker__calendar']"
+    :style="calendarStyle"
+    @mousedown.prevent
+  >
+    <slot name="beforeCalendarHeader" />
+    <component
+      :is="currentPicker"
+      :page-date="pageDate"
+      :selected-date="selectedDate"
+      :allowed-to-show-view="allowedToShowView"
+      :translation="translation"
+      :page-timestamp="pageTimestamp"
+
+      :is-rtl="isRtl"
+      :use-utc="useUtc"
+      :show-header="showHeader"
+      :full-month-name="fullMonthName"
+      :monday-first="mondayFirst"
+      :day-cell-content="dayCellContent"
+      :highlighted="highlighted"
+      :disabled-dates="disabledDates"
+
+      @select-date="selectDate"
+      @changed-month="handleChangedMonthFromDayPicker"
+      @selected-disabled="selectDisabledDate"
+
+      @select-month="selectMonth"
+      @changed-year="setPageDate"
+      @show-month-calendar="showSpecificCalendar('Month')"
+
+      @select-year="selectYear"
+      @changed-decade="setPageDate"
+      @show-year-calendar="showSpecificCalendar('Year')"
+    >
+      <template
+        v-for="slotKey of calendarSlots"
+      >
+        <slot
+          :name="`${slotKey}`"
+          :item="slotKey"
+        />
+      </template>
+    </component>
+    <slot name="calendarFooter" />
+  </div>
+</template>
+<script>
+import { makeDateUtils } from '~/utils/DateUtils'
+import PickerDay from '~/components/PickerDay'
+import PickerMonth from '~/components/PickerMonth'
+import PickerYear from '~/components/PickerYear'
+import calendarProps from '~/mixins/calendarProps'
+import sharedProps from '~/mixins/sharedProps'
+import calendarSlots from '~/utils/calendarSlots'
+
+export default {
+  name: 'Calendar',
+  components: {
+    PickerDay,
+    PickerMonth,
+    PickerYear,
+  },
+  mixins: [
+    calendarProps,
+    sharedProps,
+  ],
+  props: {
+    translation: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: Date,
+      default: null,
+    },
+  },
+  data() {
+    const constructedDateUtils = makeDateUtils(this.useUtc)
+    const startDate = constructedDateUtils.getNewDateObject(this.openDate)
+    const pageTimestamp = constructedDateUtils.setDate(startDate, 1)
+    return {
+      /*
+       * Vue cannot observe changes to a Date Object so date must be stored as a timestamp
+       * This represents the first day of the current viewing month
+       * {Number}
+       */
+      pageTimestamp,
+      /*
+       * Selected Date
+       * {Date}
+       */
+      selectedDate: null,
+      calendarSlots,
+      currentPicker: '',
+      utils: constructedDateUtils,
+    }
+  },
+  computed: {
+    pageDate() {
+      return new Date(this.pageTimestamp)
+    },
+
+    calendarStyle() {
+      return {
+        position: this.isInline ? 'static' : undefined,
+      }
+    },
+    isInline() {
+      return !!this.inline
+    },
+
+    computedInitialView() {
+      if (!this.initialView) {
+        return this.minimumView
+      }
+
+      return this.initialView
+    },
+  },
+  watch: {
+    initialView() {
+      this.setInitialView()
+    },
+    openDate() {
+      this.setPageDate()
+    },
+    value: {
+      handler(newValue) {
+        this.setValue(newValue)
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    /**
+     * Initiate the component
+     */
+    init() {
+      this.setInitialView()
+    },
+    /**
+     * @param {Object} date
+     */
+    selectDate(date) {
+      this.setDate(date.timestamp)
+      if (!this.isInline) {
+        this.close(true)
+      }
+      this.$emit('reset-typed-date', this.utils.getNewDateObject())
+    },
+    /**
+     * @param {Object} date
+     */
+    selectDisabledDate(date) {
+      this.$emit('selected-disabled', date)
+    },
+    /**
+     * @param {Object} month
+     */
+    selectMonth(month) {
+      const date = new Date(month.timestamp)
+      if (this.allowedToShowView('day')) {
+        this.setPageDate(date)
+        this.$emit('changed-month', month)
+        this.showSpecificCalendar('Day')
+      } else {
+        this.selectDate(month)
+      }
+    },
+    /**
+     * @param {Object} year
+     */
+    selectYear(year) {
+      const date = new Date(year.timestamp)
+      if (this.allowedToShowView('month')) {
+        this.setPageDate(date)
+        this.$emit('changed-year', year)
+        this.showSpecificCalendar('Month')
+      } else {
+        this.selectDate(year)
+      }
+    },
+    /**
+     * Handles a month change from the day picker
+     */
+    handleChangedMonthFromDayPicker(date) {
+      this.setPageDate(date)
+      this.$emit('changed-month', date)
+    },
+
+    /**
+     * Show a specific picker
+     * @return {Boolean}
+     */
+    showSpecificCalendar(type) {
+      if (type) {
+        if (!this.allowedToShowView(type.toLowerCase())) {
+          return false
+        }
+        this.currentPicker = `Picker${type}`
+        return true
+      }
+      this.currentPicker = ''
+      return false
+    },
+
+    /**
+     * Sets the initial picker page view: day, month or year
+     */
+    setInitialView() {
+      const initialView = this.computedInitialView
+      if (!this.allowedToShowView(initialView)) {
+        throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
+      }
+      switch (initialView) {
+        case 'year':
+          this.showSpecificCalendar('Year')
+          break
+        case 'month':
+          this.showSpecificCalendar('Month')
+          break
+        default:
+          this.showSpecificCalendar('Day')
+          break
+      }
+    },
+
+    /**
+     * Are we allowed to show a specific picker view?
+     * @param {String} view
+     * @return {Boolean}
+     */
+    allowedToShowView(view) {
+      const views = [
+        'day',
+        'month',
+        'year',
+      ]
+      const minimumViewIndex = views.indexOf(this.minimumView)
+      const maximumViewIndex = views.indexOf(this.maximumView)
+      const viewIndex = views.indexOf(view)
+
+      return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
+    },
+
+    /**
+     * Sets the date that the calendar should open on
+     */
+    setPageDate(date) {
+      let dateTemp = date
+      if (!dateTemp) {
+        if (this.openDate) {
+          dateTemp = new Date(this.openDate)
+        } else {
+          dateTemp = new Date()
+        }
+        dateTemp = this.utils.resetDateTime(dateTemp)
+      }
+      this.pageTimestamp = this.utils.setDate(new Date(dateTemp), 1)
+    },
+    /**
+     * Set the selected date
+     * @param {Number} timestamp
+     */
+    setDate(timestamp) {
+      const date = new Date(timestamp)
+      this.selectedDate = date
+      this.setPageDate(date)
+      this.$emit('selected', date)
+      this.$emit('input', date)
+    },
+
+    /**
+     * Set the datepicker value
+     * @param {Date|String|Number|null} date
+     */
+    setValue(date) {
+      let dateTemp = date
+      if (typeof dateTemp === 'string' || typeof dateTemp === 'number') {
+        const parsed = new Date(dateTemp)
+        dateTemp = Number.isNaN(parsed.valueOf()) ? null : parsed
+      }
+      if (!dateTemp) {
+        this.setPageDate()
+        this.selectedDate = null
+        return
+      }
+      this.selectedDate = dateTemp
+      this.setPageDate(dateTemp)
+    },
+    close() {
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../styles/calendar.scss';
+</style>
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 00b057db..da81e69e 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -4,8 +4,7 @@
     <!-- Calendar Button -->
     <span
       v-if="calendarButton"
-      :class="{'input-group-prepend' : bootstrapStyling}"
-      :style="{'cursor:not-allowed;' : disabled}"
+      :class="{'input-group-prepend' : bootstrapStyling, 'calendar-btn-disabled': disabled}"
       class="vdp-datepicker__calendar-button"
       @click="showCalendar(true)"
     >
@@ -63,11 +62,13 @@
 <script>
 import { makeDateUtils } from '~/utils/DateUtils'
 import inputProps from '~/mixins/inputProps'
+import sharedProps from '~/mixins/sharedProps'
 
 export default {
   name: 'DatepickerInput',
   mixins: [
     inputProps,
+    sharedProps,
   ],
   props: {
     selectedDate: {
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 2cf0cc52..4bdd9ffe 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -4,38 +4,14 @@
     class="vdp-datepicker"
   >
     <DateInput
-      :id="id"
-      :selected-date="selectedDate"
+      v-bind="inputProperties"
       :reset-typed-date="resetTypedDate"
-      :format="format"
-      :parser="parser"
+      :selected-date="model"
       :translation="translation"
-      :inline="inline"
-      :name="name"
-      :ref-name="refName"
-      :open-date="openDate"
-      :placeholder="placeholder"
-      :input-class="inputClass"
-      :typeable="typeable"
-      :clear-button="clearButton"
-      :clear-button-icon="clearButtonIcon"
-      :calendar-button="calendarButton"
-      :calendar-button-icon="calendarButtonIcon"
-      :calendar-button-icon-content="calendarButtonIconContent"
-      :disabled="disabled"
-      :required="required"
-      :autofocus="autofocus"
-      :maxlength="maxlength"
-      :pattern="pattern"
-      :bootstrap-styling="bootstrapStyling"
-      :use-utc="useUtc"
-      :show-calendar-on-focus="showCalendarOnFocus"
-      :tabindex="tabindex"
-      :show-calendar-on-button-click="showCalendarOnButtonClick"
+      @clear-date="clearDate"
       @show-calendar="showCalendar"
       @close-calendar="close(true)"
       @typed-date="setTypedDate"
-      @clear-date="clearDate"
       @blur="onBlur"
       @focus="onFocus"
     >
@@ -48,80 +24,46 @@
         name="afterDateInput"
       />
     </DateInput>
+    <Popup
+      :append-to-body="appendToBody"
+      :visible="isOpen"
+      :inline="inline"
+      :fixed-position="fixedPosition"
+      :rtl="isRtl"
+    >
+      <Calendar
+        v-if="isOpen"
+        v-bind="calendarProperties"
 
-    <template v-if="isOpen">
-      <div
-        ref="datepicker"
-        :class="[calendarClass, 'vdp-datepicker__calendar']"
-        :style="calendarStyle"
-        @mousedown.prevent
-      >
-        <slot name="beforeCalendarHeader" />
-        <component
-          :is="currentPicker"
-          :page-date="pageDate"
-          :selected-date="selectedDate"
-          :allowed-to-show-view="allowedToShowView"
-          :disabled-dates="disabledDates"
-          :highlighted="highlighted"
-          :translation="translation"
-          :page-timestamp="pageTimestamp"
-          :is-rtl="isRtl"
-          :use-utc="useUtc"
-
-          :show-header="showHeader"
-          :full-month-name="fullMonthName"
-          :monday-first="mondayFirst"
-          :day-cell-content="dayCellContent"
-
-          @select-date="selectDate"
-          @changed-month="handleChangedMonthFromDayPicker"
-          @selected-disabled="selectDisabledDate"
-
-          @select-month="selectMonth"
-          @changed-year="setPageDate"
-          @show-month-calendar="showSpecificCalendar('Month')"
+        :open="isOpen"
+        :value="model"
+        :translation="translation"
 
-          @select-year="selectYear"
-          @changed-decade="setPageDate"
-          @show-year-calendar="showSpecificCalendar('Year')"
+        @reset-typed-date="onResetTypedDate"
+        @selected-disabled="onSelectedDisabled"
+        @changed-month="onMonthChange"
+        @changed-year="onYearChange"
+        @input="setDate"
+        @close="close"
+      >
+        <slot
+          slot="beforeCalendarHeader"
+          name="beforeCalendarHeader"
+        />
+        <template
+          v-for="slotKey of calendarSlots"
         >
           <slot
-            slot="beforeCalendarHeaderDay"
-            name="beforeCalendarHeaderDay"
+            :slot="slotKey"
+            :name="slotKey"
           />
-          <slot
-            slot="calendarFooterDay"
-            name="calendarFooterDay"
-          />
-          <slot
-            slot="beforeCalendarHeaderMonth"
-            name="beforeCalendarHeaderMonth"
-          />
-          <slot
-            slot="calendarFooterMonth"
-            name="calendarFooterMonth"
-          />
-          <slot
-            slot="beforeCalendarHeaderYear"
-            name="beforeCalendarHeaderYear"
-          />
-          <slot
-            slot="calendarFooterYear"
-            name="calendarFooterYear"
-          />
-          <slot
-            slot="nextIntervalBtn"
-            name="nextIntervalBtn"
-          />
-          <slot
-            slot="prevIntervalBtn"
-            name="prevIntervalBtn"
-          />
-        </component>
-        <slot name="calendarFooter" />
-      </div>
-    </template>
+        </template>
+        <slot
+          slot="calendarFooter"
+          name="calendarFooter"
+        />
+      </Calendar>
+    </Popup>
   </div>
 </template>
 <script>
@@ -129,86 +71,30 @@ import '~/utils/polyfills'
 import en from '~/locale/translations/en'
 import { makeDateUtils } from '~/utils/DateUtils'
 import DateInput from '~/components/DateInput'
-import PickerDay from '~/components/PickerDay'
-import PickerMonth from '~/components/PickerMonth'
-import PickerYear from '~/components/PickerYear'
+import Calendar from '~/components/Calendar'
 import inputProps from '~/mixins/inputProps'
+import calendarProps from '~/mixins/calendarProps'
+import sharedProps from '~/mixins/sharedProps'
+import calendarSlots from '~/utils/calendarSlots'
+import Popup from '~/components/Popup'
 
 export default {
   name: 'Datepicker',
   components: {
+    Popup,
     DateInput,
-    PickerDay,
-    PickerMonth,
-    PickerYear,
+    Calendar,
   },
   mixins: [
     inputProps,
+    calendarProps,
+    sharedProps,
   ],
   props: {
-    calendarClass: {
-      type: [
-        String,
-        Object,
-        Array,
-      ],
-      default: '',
-    },
-    dayCellContent: {
-      type: Function,
-      default: (day) => day.date,
-    },
-    disabledDates: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    fixedPosition: {
-      type: String,
-      default: '',
-      validator: (val) => val === ''
-        || val === 'bottom'
-        || val === 'bottom-left'
-        || val === 'bottom-right'
-        || val === 'top'
-        || val === 'top-left'
-        || val === 'top-right',
-    },
-    fullMonthName: {
-      type: Boolean,
-      default: false,
-    },
-    highlighted: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-    initialView: {
-      type: String,
-      default: '',
-    },
     language: {
       type: Object,
       default: () => en,
     },
-    maximumView: {
-      type: String,
-      default: 'year',
-    },
-    minimumView: {
-      type: String,
-      default: 'day',
-    },
-    mondayFirst: {
-      type: Boolean,
-      default: false,
-    },
-    showHeader: {
-      type: Boolean,
-      default: true,
-    },
     value: {
       type: [
         String,
@@ -230,62 +116,49 @@ export default {
       ],
       default: '',
     },
+
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
+
+    fixedPosition: {
+      type: String,
+      default: '',
+      validator: (val) => val === ''
+        || val === 'bottom'
+        || val === 'bottom-left'
+        || val === 'bottom-right'
+        || val === 'top'
+        || val === 'top-left'
+        || val === 'top-right',
+    },
   },
   data() {
-    // const startDate = this.openDate ? new Date(this.openDate) : new Date()
     const constructedDateUtils = makeDateUtils(this.useUtc)
-    let startDate
-    if (this.openDate) {
-      startDate = constructedDateUtils.getNewDateObject(this.openDate)
-    } else {
-      startDate = constructedDateUtils.getNewDateObject()
-    }
-    const pageTimestamp = constructedDateUtils.setDate(startDate, 1)
     return {
-      /*
-       * Vue cannot observe changes to a Date Object so date must be stored as a timestamp
-       * This represents the first day of the current viewing month
-       * {Number}
-       */
-      pageTimestamp,
-      currentPicker: '',
       /*
        * Selected Date
        * {Date}
        */
-      selectedDate: null,
-      /*
-       * Positioning
-       */
-      calendarHeight: 0,
+      model: null,
+      isOpen: false,
       resetTypedDate: constructedDateUtils.getNewDateObject(),
-      utils: constructedDateUtils,
+      calendarSlots,
     }
   },
   computed: {
-    computedInitialView() {
-      if (!this.initialView) {
-        return this.minimumView
-      }
-
-      return this.initialView
+    inputProperties() {
+      return this.getProps(inputProps)
     },
-    pageDate() {
-      return new Date(this.pageTimestamp)
+    calendarProperties() {
+      return this.getProps(calendarProps)
     },
 
     translation() {
       return this.language
     },
 
-    calendarStyle() {
-      return {
-        position: this.isInline ? 'static' : undefined,
-      }
-    },
-    isOpen() {
-      return this.currentPicker !== ''
-    },
     isInline() {
       return !!this.inline
     },
@@ -297,69 +170,25 @@ export default {
     value(value) {
       this.setValue(value)
     },
-    openDate() {
-      this.setPageDate()
-    },
-    initialView() {
-      this.setInitialView()
+    isInline: {
+      handler(value) {
+        this.isOpen = value
+      },
+      immediate: true,
     },
   },
   mounted() {
     this.init()
   },
   methods: {
-    setPickerPosition() {
-      this.$nextTick(() => {
-        const calendar = this.$refs.datepicker
-        if (calendar) {
-          if (this.currentPicker) {
-            const parent = calendar.parentElement
-            const calendarBounding = calendar.getBoundingClientRect()
-            const outOfBoundsRight = calendarBounding.right > window.innerWidth
-            const outOfBoundsBottom = calendarBounding.bottom > window.innerHeight
-            const parentHeight = `${parent.getBoundingClientRect().height}px`
-
-            if (this.fixedPosition === '') {
-              if (outOfBoundsRight) {
-                calendar.style.right = 0
-              } else {
-                calendar.style.right = 'unset'
-              }
-
-              if (outOfBoundsBottom) {
-                calendar.style.bottom = parentHeight
-              } else {
-                calendar.style.bottom = 'unset'
-              }
-            } else {
-              if (this.fixedPosition.indexOf('right') !== -1) {
-                calendar.style.right = 0
-              } else {
-                calendar.style.right = 'unset'
-              }
-              if (this.fixedPosition.indexOf('top') !== -1) {
-                calendar.style.bottom = parentHeight
-              } else {
-                calendar.style.bottom = 'unset'
-              }
-            }
-          } else {
-            calendar.style.right = 'unset'
-            calendar.style.bottom = 'unset'
-          }
+    getProps(typeProps) {
+      const props = {}
+      Object.keys(this.$props).forEach((prop) => {
+        if (typeProps.props[prop] || sharedProps.props[prop]) {
+          props[prop] = this.$props[prop]
         }
       })
-    },
-    /**
-     * Called in the event that the user navigates to date pages and
-     * closes the picker without selecting a date.
-     */
-    resetDefaultPageDate() {
-      if (this.selectedDate === null) {
-        this.setPageDate()
-        return
-      }
-      this.setPageDate(this.selectedDate)
+      return props
     },
     /**
      * Effectively a toggle to show/hide the calendar
@@ -372,74 +201,20 @@ export default {
       if (this.isOpen) {
         return this.close(true)
       }
-      this.setInitialView()
       if (!this.isInline) {
-        this.setPickerPosition()
+        this.isOpen = true
         this.$emit('opened')
       }
       return true
     },
-    /**
-     * Sets the initial picker page view: day, month or year
-     */
-    setInitialView() {
-      const initialView = this.computedInitialView
-      if (!this.allowedToShowView(initialView)) {
-        throw new Error(`initialView '${this.initialView}' cannot be rendered based on minimum '${this.minimumView}' and maximum '${this.maximumView}'`)
-      }
-      switch (initialView) {
-        case 'year':
-          this.showSpecificCalendar('Year')
-          break
-        case 'month':
-          this.showSpecificCalendar('Month')
-          break
-        default:
-          this.showSpecificCalendar('Day')
-          break
-      }
-    },
-    /**
-     * Are we allowed to show a specific picker view?
-     * @param {String} view
-     * @return {Boolean}
-     */
-    allowedToShowView(view) {
-      const views = [
-        'day',
-        'month',
-        'year',
-      ]
-      const minimumViewIndex = views.indexOf(this.minimumView)
-      const maximumViewIndex = views.indexOf(this.maximumView)
-      const viewIndex = views.indexOf(view)
 
-      return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex
-    },
-    /**
-     * Show a specific picker
-     * @return {Boolean}
-     */
-    showSpecificCalendar(type) {
-      if (type) {
-        if (!this.allowedToShowView(type.toLowerCase())) {
-          return false
-        }
-        this.close()
-        this.currentPicker = `Picker${type}`
-        return true
-      }
-      this.currentPicker = ''
-      return false
-    },
     /**
      * Set the selected date
      * @param {Number} timestamp
      */
     setDate(timestamp) {
       const date = new Date(timestamp)
-      this.selectedDate = date
-      this.setPageDate(date)
+      this.model = date
       this.$emit('selected', date)
       this.$emit('input', date)
     },
@@ -447,54 +222,11 @@ export default {
      * Clear the selected date
      */
     clearDate() {
-      this.selectedDate = null
-      this.setPageDate()
+      this.model = null
       this.$emit('selected', null)
       this.$emit('input', null)
       this.$emit('cleared')
     },
-    /**
-     * @param {Object} date
-     */
-    selectDate(date) {
-      this.setDate(date.timestamp)
-      if (!this.isInline) {
-        this.close(true)
-      }
-      this.resetTypedDate = this.utils.getNewDateObject()
-    },
-    /**
-     * @param {Object} date
-     */
-    selectDisabledDate(date) {
-      this.$emit('selected-disabled', date)
-    },
-    /**
-     * @param {Object} month
-     */
-    selectMonth(month) {
-      const date = new Date(month.timestamp)
-      if (this.allowedToShowView('day')) {
-        this.setPageDate(date)
-        this.$emit('changed-month', month)
-        this.showSpecificCalendar('Day')
-      } else {
-        this.selectDate(month)
-      }
-    },
-    /**
-     * @param {Object} year
-     */
-    selectYear(year) {
-      const date = new Date(year.timestamp)
-      if (this.allowedToShowView('month')) {
-        this.setPageDate(date)
-        this.$emit('changed-year', year)
-        this.showSpecificCalendar('Month')
-      } else {
-        this.selectDate(year)
-      }
-    },
     /**
      * Set the datepicker value
      * @param {Date|String|Number|null} date
@@ -506,34 +238,10 @@ export default {
         dateTemp = Number.isNaN(parsed.valueOf()) ? null : parsed
       }
       if (!dateTemp) {
-        this.setPageDate()
-        this.selectedDate = null
+        this.model = null
         return
       }
-      this.selectedDate = dateTemp
-      this.setPageDate(dateTemp)
-    },
-    /**
-     * Sets the date that the calendar should open on
-     */
-    setPageDate(date) {
-      let dateTemp = date
-      if (!dateTemp) {
-        if (this.openDate) {
-          dateTemp = new Date(this.openDate)
-        } else {
-          dateTemp = new Date()
-        }
-        dateTemp = this.utils.resetDateTime(dateTemp)
-      }
-      this.pageTimestamp = this.utils.setDate(new Date(dateTemp), 1)
-    },
-    /**
-     * Handles a month change from the day picker
-     */
-    handleChangedMonthFromDayPicker(date) {
-      this.setPageDate(date)
-      this.$emit('changed-month', date)
+      this.model = dateTemp
     },
     /**
      * Set the date from a typedDate event
@@ -541,13 +249,14 @@ export default {
     setTypedDate(date) {
       this.setDate(date.getTime())
     },
+
     /**
      * Close all calendar layers
      * @param {Boolean} full - emit close event
      */
     close(full = false) {
-      this.showSpecificCalendar()
       if (!this.isInline) {
+        this.isOpen = false
         if (full) {
           this.$emit('closed')
         }
@@ -560,9 +269,18 @@ export default {
       if (this.value) {
         this.setValue(this.value)
       }
-      if (this.isInline) {
-        this.setInitialView()
-      }
+    },
+    onResetTypedDate(data) {
+      this.resetTypedDate = data
+    },
+    onMonthChange(data) {
+      this.$emit('changed-month', data)
+    },
+    onYearChange(data) {
+      this.$emit('changed-year', data)
+    },
+    onSelectedDisabled(data) {
+      this.$emit('selected-disabled', data)
     },
     onBlur() {
       this.$emit('blur')
@@ -574,6 +292,7 @@ export default {
 }
 
 </script>
+
 <style lang="scss">
 @import '../styles/style.scss';
 </style>
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
new file mode 100644
index 00000000..9e1b3745
--- /dev/null
+++ b/src/components/Popup.vue
@@ -0,0 +1,94 @@
+<script>
+import {
+  getPopupElementSize,
+  getRelativePosition,
+} from '~/utils/dom'
+
+export default {
+  name: 'Popup',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+    fixedPosition: {
+      type: String,
+      default: '',
+    },
+    rtl: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      popupRect: null,
+      relativeElement: null,
+    }
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        this.$nextTick(() => {
+          if (val) {
+            this.displayPopup()
+          }
+        })
+      },
+    },
+  },
+  mounted() {
+    if (this.inline) {
+      return
+    }
+    this.relativeElement = this.$parent.$el
+    if (this.appendToBody) {
+      document.body.appendChild(this.$el)
+    }
+  },
+  beforeDestroy() {
+    if (this.inline) {
+      return
+    }
+    if (this.appendToBody && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  },
+  methods: {
+    displayPopup() {
+      if (this.inline || !this.visible) return
+      const popup = this.$el
+      const relativeElement = this.$parent.$el
+
+      if (!this.popupRect) {
+        this.popupRect = getPopupElementSize(popup)
+      }
+      const { width, height } = this.popupRect
+      const { left, top } = getRelativePosition({
+        el: popup,
+        elRelative: relativeElement,
+        targetWidth: width,
+        targetHeight: height,
+        fixed: this.appendToBody,
+        fixedPosition: this.fixedPosition,
+        rtl: this.rtl,
+      })
+
+      this.$el.style.left = left
+      this.$el.style.top = top
+    },
+  },
+  render() {
+    return this.$slots.default
+  },
+}
+</script>
diff --git a/src/mixins/calendarProps.vue b/src/mixins/calendarProps.vue
new file mode 100644
index 00000000..e8e506a6
--- /dev/null
+++ b/src/mixins/calendarProps.vue
@@ -0,0 +1,62 @@
+<script>
+export default ({
+  props: {
+    calendarClass: {
+      type: [
+        String,
+        Object,
+        Array,
+      ],
+      default: '',
+    },
+    dayCellContent: {
+      type: Function,
+      default: (day) => day.date,
+    },
+
+    disabledDates: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+
+    fullMonthName: {
+      type: Boolean,
+      default: false,
+    },
+    highlighted: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    mondayFirst: {
+      type: Boolean,
+      default: false,
+    },
+
+    initialView: {
+      type: String,
+      default: '',
+    },
+    maximumView: {
+      type: String,
+      default: 'year',
+    },
+    minimumView: {
+      type: String,
+      default: 'day',
+    },
+  },
+  computed: {
+    isRtl() {
+      return this.translation.rtl === true
+    },
+  },
+})
+</script>
diff --git a/src/mixins/inputProps.vue b/src/mixins/inputProps.vue
index 64253691..e7062d91 100644
--- a/src/mixins/inputProps.vue
+++ b/src/mixins/inputProps.vue
@@ -24,19 +24,6 @@ export default ({
       type: String,
       default: '',
     },
-    openDate: {
-      type: [
-        String,
-        Date,
-        Number,
-      ],
-      default: null,
-      validator:
-        (val) => val === null
-          || val instanceof Date
-          || typeof val === 'string'
-          || typeof val === 'number',
-    },
     placeholder: {
       type: String,
       default: null,
@@ -48,10 +35,6 @@ export default ({
       ],
       default: null,
     },
-    inline: {
-      type: Boolean,
-      default: false,
-    },
     inputClass: {
       type: [
         String,
@@ -96,10 +79,6 @@ export default ({
       type: Boolean,
       default: false,
     },
-    useUtc: {
-      type: Boolean,
-      default: false,
-    },
     showCalendarOnFocus: {
       type: Boolean,
       default: false,
diff --git a/src/mixins/sharedProps.vue b/src/mixins/sharedProps.vue
new file mode 100644
index 00000000..027826a7
--- /dev/null
+++ b/src/mixins/sharedProps.vue
@@ -0,0 +1,26 @@
+<script>
+export default ({
+  props: {
+    openDate: {
+      type: [
+        String,
+        Date,
+        Number,
+      ],
+      default: null,
+      validator: (val) => val === null
+        || val instanceof Date
+        || typeof val === 'string'
+        || typeof val === 'number',
+    },
+    useUtc: {
+      type: Boolean,
+      default: false,
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss
new file mode 100644
index 00000000..42bebcdf
--- /dev/null
+++ b/src/styles/calendar.scss
@@ -0,0 +1,155 @@
+.vdp-datepicker__calendar {
+  position: absolute;
+  z-index: 10000;
+  background: #fff;
+  width: 300px;
+  border: 1px solid #ccc;
+
+  header {
+    display: block;
+    line-height: 40px;
+
+    span {
+      display: inline-block;
+      text-align: center;
+      width: 71.42857142857143%;
+      float: left;
+    }
+
+    .prev,
+    .next {
+      max-height: 40px;
+      width: 14.285714285714286%;
+      float: left;
+      position: relative;
+
+      .default {
+        text-indent: -10000px;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          border: 6px solid transparent;
+        }
+      }
+    }
+
+    .prev {
+      .default {
+        &:after {
+          border-right: 10px solid #000;
+          margin-left: -5px;
+        }
+
+        &.disabled:after {
+          border-right: 10px solid #ddd;
+        }
+      }
+    }
+
+    .next {
+      .default {
+        &:after {
+          border-left: 10px solid #000;
+          margin-left: 5px;
+        }
+
+        &.disabled:after {
+          border-left: 10px solid #ddd;
+        }
+      }
+    }
+
+    .prev:not(.disabled),
+    .next:not(.disabled),
+    .up:not(.disabled) {
+      cursor: pointer;
+
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+
+  .disabled {
+    color: #ddd;
+    cursor: default;
+  }
+
+  .flex-rtl {
+    display: flex;
+    width: inherit;
+    flex-wrap: wrap;
+  }
+
+  .cell {
+    display: inline-block;
+    padding: 0 5px;
+    width: 14.285714285714286%;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    vertical-align: middle;
+    border: 1px solid transparent;
+
+    &:not(.blank):not(.disabled).day,
+    &:not(.blank):not(.disabled).month,
+    &:not(.blank):not(.disabled).year {
+      cursor: pointer;
+
+      &:hover {
+        border: 1px solid #4bd;
+      }
+    }
+
+    &.selected {
+      background: #4bd;
+
+      &:hover {
+        background: #4bd;
+      }
+
+      &.highlighted {
+        background: #4bd;
+      }
+    }
+
+    &.highlighted {
+      background: #cae5ed;
+
+      &.disabled {
+        color: #a3a3a3;
+      }
+    }
+
+    &.grey {
+      color: #888;
+
+      &:hover {
+        background: inherit;
+      }
+    }
+
+    &.day-header {
+      font-size: 75%;
+      white-space: nowrap;
+      cursor: inherit;
+
+      &:hover {
+        background: inherit;
+      }
+    }
+  }
+
+  .month,
+  .year {
+    width: 33.333%;
+  }
+
+  .picker-view {
+    width: inherit;
+  }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 6a8bf7c0..ecc781da 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -11,163 +11,6 @@
   }
 }
 
-.vdp-datepicker__calendar {
-  position: absolute;
-  z-index: 10000;
-  background: #fff;
-  width: 300px;
-  border: 1px solid #ccc;
-
-  header {
-    display: block;
-    line-height: 40px;
-
-    span {
-      display: inline-block;
-      text-align: center;
-      width: 71.42857142857143%;
-      float: left;
-    }
-
-    .prev,
-    .next {
-      max-height: 40px;
-      width: 14.285714285714286%;
-      float: left;
-      position: relative;
-
-      .default {
-        text-indent: -10000px;
-
-        &:after {
-          content: '';
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translateX(-50%) translateY(-50%);
-          border: 6px solid transparent;
-        }
-      }
-    }
-
-    .prev {
-      .default {
-        &:after {
-          border-right: 10px solid #000;
-          margin-left: -5px;
-        }
-
-        &.disabled:after {
-          border-right: 10px solid #ddd;
-        }
-      }
-    }
-
-    .next {
-      .default {
-        &:after {
-          border-left: 10px solid #000;
-          margin-left: 5px;
-        }
-
-        &.disabled:after {
-          border-left: 10px solid #ddd;
-        }
-      }
-    }
-
-    .prev:not(.disabled),
-    .next:not(.disabled),
-    .up:not(.disabled) {
-      cursor: pointer;
-
-      &:hover {
-        background: #eee;
-      }
-    }
-  }
-
-  .disabled {
-    color: #ddd;
-    cursor: default;
-  }
-
-  .flex-rtl {
-    display: flex;
-    width: inherit;
-    flex-wrap: wrap;
-  }
-
-  .cell {
-    display: inline-block;
-    padding: 0 5px;
-    width: 14.285714285714286%;
-    height: 40px;
-    line-height: 40px;
-    text-align: center;
-    vertical-align: middle;
-    border: 1px solid transparent;
-
-    &:not(.blank):not(.disabled).day,
-    &:not(.blank):not(.disabled).month,
-    &:not(.blank):not(.disabled).year {
-      cursor: pointer;
-
-      &:hover {
-        border: 1px solid #4bd;
-      }
-    }
-
-    &.selected {
-      background: #4bd;
-
-      &:hover {
-        background: #4bd;
-      }
-
-      &.highlighted {
-        background: #4bd;
-      }
-    }
-
-    &.highlighted {
-      background: #cae5ed;
-
-      &.disabled {
-        color: #a3a3a3;
-      }
-    }
-
-    &.grey {
-      color: #888;
-
-      &:hover {
-        background: inherit;
-      }
-    }
-
-    &.day-header {
-      font-size: 75%;
-      white-space: nowrap;
-      cursor: inherit;
-
-      &:hover {
-        background: inherit;
-      }
-    }
-  }
-
-  .month,
-  .year {
-    width: 33.333%;
-  }
-
-  .picker-view {
-    width: inherit;
-  }
-}
-
-
 .vdp-datepicker__clear-button,
 .vdp-datepicker__calendar-button {
   cursor: pointer;
diff --git a/src/utils/calendarSlots.js b/src/utils/calendarSlots.js
new file mode 100755
index 00000000..0383cf83
--- /dev/null
+++ b/src/utils/calendarSlots.js
@@ -0,0 +1,10 @@
+export default [
+  'beforeCalendarHeaderDay',
+  'calendarFooterDay',
+  'beforeCalendarHeaderMonth',
+  'calendarFooterMonth',
+  'beforeCalendarHeaderYear',
+  'calendarFooterYear',
+  'nextIntervalBtn',
+  'prevIntervalBtn',
+]
diff --git a/src/utils/dom.js b/src/utils/dom.js
new file mode 100644
index 00000000..ccc27679
--- /dev/null
+++ b/src/utils/dom.js
@@ -0,0 +1,123 @@
+/* eslint no-param-reassign: 0 */
+/**
+ * get the hidden element width, height
+ * @param {HTMLElement} element dom
+ */
+export function getPopupElementSize(element) {
+  const originalDisplay = element.style.display
+  const originalVisibility = element.style.visibility
+  element.style.display = 'block'
+  element.style.visibility = 'hidden'
+  const styles = window.getComputedStyle(element)
+  const width = element.offsetWidth + parseInt(styles.marginLeft, 10) + parseInt(
+    styles.marginRight,
+    10,
+  )
+  const height = element.offsetHeight + parseInt(
+    styles.marginTop,
+    10,
+  ) + parseInt(styles.marginBottom, 10)
+  element.style.display = originalDisplay
+  element.style.visibility = originalVisibility
+
+  return {
+    width,
+    height,
+  }
+}
+
+/**
+ * get the popup position
+ * @param {Element} el element
+ * @param {Element} elRelative relative element
+ * @param {Number} targetWidth target element's width
+ * @param {Number} targetHeight target element's height
+ * @param {Boolean} fixed
+ * @param {String} fixedPosition
+ * @param {Boolean} rtl
+ */
+export function getRelativePosition({
+  el,
+  elRelative,
+  targetWidth,
+  targetHeight,
+  fixed,
+  fixedPosition,
+  rtl,
+}) {
+  let left = 0
+  let top = 0
+  let offsetX = 0
+  let offsetY = 0
+  const relativeRect = elRelative.getBoundingClientRect()
+  const documentWidth = document.documentElement.clientWidth
+  const documentHeight = document.documentElement.clientHeight
+  if (fixed) {
+    offsetX = window.pageXOffset + relativeRect.left
+    offsetY = window.pageYOffset + relativeRect.top
+  }
+
+  const calendarBounding = el.getBoundingClientRect()
+  const outOfBoundsRight = calendarBounding.right > window.innerWidth
+  const outOfBoundsBottom = calendarBounding.bottom > window.innerHeight
+
+  const fixedPositionRight = fixedPosition && fixedPosition.indexOf('right') !== -1
+  const fixedPositionTop = fixedPosition && fixedPosition.indexOf('top') !== -1
+
+  const setLeft = () => {
+    left = offsetX
+  }
+  const setRight = () => {
+    left = offsetX + relativeRect.width - targetWidth
+  }
+  const setBottom = () => {
+    top = offsetY + relativeRect.height
+  }
+  const setTop = () => {
+    top = offsetY - targetHeight
+  }
+
+  if (fixedPosition === '') {
+    if (outOfBoundsRight || rtl) {
+      setRight()
+    } else {
+      setLeft()
+    }
+
+    if (outOfBoundsBottom) {
+      setTop()
+    } else {
+      setBottom()
+    }
+    const hasRelativWidth = documentWidth - relativeRect.left < targetWidth
+      && relativeRect.right < targetWidth
+
+    const hasRelativHeight = relativeRect.top <= targetHeight
+      && documentHeight - relativeRect.bottom <= targetHeight
+
+    if (hasRelativWidth) {
+      left = offsetX - relativeRect.left + 1
+    }
+
+    if (hasRelativHeight) {
+      top = offsetY + documentHeight - relativeRect.top - targetHeight
+    }
+  } else {
+    if (fixedPositionRight) {
+      setRight()
+    } else {
+      setLeft()
+    }
+
+    if (fixedPositionTop) {
+      setTop()
+    } else {
+      setBottom()
+    }
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+  }
+}