diff --git a/src/pages/proposals/ProposalDetail.vue b/src/pages/proposals/ProposalDetail.vue
index 8bc7c5669..f99e4bde7 100644
--- a/src/pages/proposals/ProposalDetail.vue
+++ b/src/pages/proposals/ProposalDetail.vue
@@ -959,7 +959,7 @@ export default {
       // },
 
       result (data) {
-        if ((data.data.getDocument.dao[0].details_daoName_n !== this.selectedDao.name) && !this.isBadge) {
+        if ((data?.data?.getDocument?.dao[0]?.details_daoName_n !== this?.selectedDao?.name) && !this.isBadge) {
           this.$router.push({ name: '404-not-found' })
         }
       }
@@ -1054,7 +1054,7 @@ export default {
     commentSectionId () { return this?.proposal?.cmntsect[0].docId },
 
     ownAssignment () {
-      return (this.proposal.__typename === PROPOSAL_TYPE.ROLE || this.proposal.__typename === PROPOSAL_TYPE.ABILITY) &&
+      return (this?.proposal?.__typename === PROPOSAL_TYPE.ROLE || this?.proposal?.__typename === PROPOSAL_TYPE.ABILITY) &&
         this.proposal.details_assignee_n === this.account &&
         proposalParsing.status(this.proposal) !== PROPOSAL_STATE.PROPOSED &&
         proposalParsing.status(this.proposal) !== PROPOSAL_STATE.REJECTED &&
@@ -1089,7 +1089,7 @@ export default {
 
     loading () { return this.$apollo.queries.proposal.loading },
 
-    isBadge () { return this.proposal.__typename === PROPOSAL_TYPE.BADGE },
+    isBadge () { return this.proposal?.__typename === PROPOSAL_TYPE.BADGE },
 
     badgeHolders () {
       const uniqueHolders = lodash.uniqBy(this.proposal.assignment, 'details_assignee_n')
@@ -1177,7 +1177,7 @@ export default {
     },
 
     onApply (proposal) {
-      if (proposal.__typename === PROPOSAL_TYPE.BADGE) {
+      if (proposal?.__typename === PROPOSAL_TYPE.BADGE) {
         proposal.type = PROPOSAL_TYPE.BADGE
         // this.$store.commit('proposals/setNext', true)
 
@@ -1199,7 +1199,7 @@ export default {
         this.saveDraft()
         this.$router.push({ name: 'proposal-create', params: { draftId } })
       }
-      if (proposal.__typename === PROPOSAL_TYPE.ARCHETYPE) {
+      if (proposal?.__typename === PROPOSAL_TYPE.ARCHETYPE) {
         proposal.type = PROPOSAL_TYPE.ARCHETYPE
         // this.$store.commit('proposals/setNext', true)
         this.$store.commit('proposals/setType', CONFIG.options.recurring.options.assignment.type)
@@ -1286,41 +1286,40 @@ export default {
         Policy: { key: 'policy', title: 'Policy' },
         Quest: { key: 'quest', title: 'Quest' },
         Budget: { key: 'circlebudget', title: 'Budget' }
-      }[this.proposal.__typename]
+      }[this.proposal?.__typename]
 
-      this.$store.commit('proposals/setStepIndex', 1)
+      this.$store.commit('proposals/setStepIndex', 0)
       this.$store.commit('proposals/setCategory', category)
-      this.$store.commit('proposals/setType', this.proposal.__typename)
+      this.$store.commit('proposals/setType', this.proposal?.__typename)
 
       this.$store.commit('proposals/setState', this.proposal?.details_state_s)
       this.$store.commit('proposals/setProposalId', this.proposal?.docId)
 
       this.$store.commit('proposals/setTitle', this.proposal?.details_title_s)
       this.$store.commit('proposals/setDescription', this.proposal?.details_description_s)
+      // this.$store.commit('proposals/setCircle', this.proposal?.details_description_s)
 
       this.$store.commit('proposals/setUsdAmount', parseFloat(this?.proposal?.details_usdAmount_a))
       this.$store.commit('proposals/setCommitment', parseFloat(this?.proposal?.details_timeShareX100_i))
       this.$store.commit('proposals/setDeferred', parseFloat(this?.proposal?.details_deferredPercX100_i))
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.CIRCLE) {
+      this.$store.commit('proposals/setUrl', this.proposal?.details_url_s)
+
+      if (this.proposal?.__typename === PROPOSAL_TYPE.CIRCLE) {
         this.$store.commit('proposals/setCircle', {
           label: this.proposal?.parentcircle[0]?.name,
           value: this.proposal?.parentcircle[0]?.id
         })
       }
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.POLICY) {
+      if (this.proposal?.__typename === PROPOSAL_TYPE.POLICY) {
         this.$store.commit('proposals/setCircle', {
           label: this.proposal?.parentcircle[0]?.name,
           value: this.proposal?.parentcircle[0]?.id
         })
       }
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.PAYOUT) {
-        this.$store.commit('proposals/setUrl', this.proposal?.details_url_s)
-      }
-
-      if (this.proposal.__typename === PROPOSAL_TYPE.ROLE) { // Role Assignment
+      if (this.proposal?.__typename === PROPOSAL_TYPE.ROLE) { // Role Assignment
         const tier = this.tiers.find(tier => tier.label === this.proposal?.salaryband?.[0]?.details_name_s)
         const archetype = this.archetypes.find(archetype => archetype.label === this.proposal?.salaryband?.[0]?.assignment?.[0]?.role?.[0]?.system_nodeLabel_s)
         this.$store.commit('proposals/setRole', archetype)
@@ -1330,26 +1329,27 @@ export default {
         this.$store.commit('proposals/setMinDeferred', tier?.value?.minDeferred || 0)
         this.$store.commit('proposals/setMinCommitment', 0)
 
-        this.$store.commit('proposals/setCommitment', parseFloat(1))
-        this.$store.commit('proposals/setDeferred', parseFloat(tier.value.minDeferred))
+        this.$store.commit('proposals/setCommitment', this.proposal?.details_timeShareX100_i)
+        this.$store.commit('proposals/setDeferred', parseFloat(this.proposal?.details_deferredPercX100_i))
         this.$store.commit('proposals/setStartPeriod', this.proposal?.start[0])
+        // this.$store.commit('proposals/setStartDate', this.proposal?.start[0]?.details_startTime_t)
         this.$store.commit('proposals/setPeriodCount', this.proposal?.details_periodCount_i)
         // this.$store.commit('proposals/setMinDeferred', this.proposal?.role[0]?.details_minDeferredX100_i)
       }
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.ABILITY || this.proposal.__typename === PROPOSAL_TYPE.ASSIGNBADGE) { // Badge Assignment
+      if (this.proposal?.__typename === PROPOSAL_TYPE.ABILITY || this.proposal?.__typename === PROPOSAL_TYPE.ASSIGNBADGE) { // Badge Assignment
         this.$store.commit('proposals/setBadge', this?.proposal.badge?.[0])
         this.$store.commit('proposals/setStartPeriod', this.proposal?.start[0])
         this.$store.commit('proposals/setPeriodCount', this.proposal?.details_periodCount_i)
       }
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.ARCHETYPE) {
+      if (this.proposal?.__typename === PROPOSAL_TYPE.ARCHETYPE) {
         this.$store.commit('proposals/setAnnualUsdSalary', parseInt(this.proposal?.details_annualUsdSalary_a.split(' ').shift()))
         this.$store.commit('proposals/setRoleCapacity', this.proposal?.details_fulltimeCapacityX100_i)
         this.$store.commit('proposals/setMinDeferred', this.proposal?.details_minDeferredX100_i)
       }
 
-      if (this.proposal.__typename === PROPOSAL_TYPE.BADGE) {
+      if (this.proposal?.__typename === PROPOSAL_TYPE.BADGE) {
         this.$store.commit('proposals/setBadge', this?.proposal)
         this.$store.commit('proposals/setPurpose', this.proposal?.details_purpose_s)
         this.$store.commit('proposals/setIcon', this.proposal?.details_icon_s)
@@ -1410,7 +1410,7 @@ export default {
       await this.$forceUpdate()
     },
     toggle (proposal) {
-      return proposal.__typename === PROPOSAL_TYPE.ROLE || proposal.__typename === PROPOSAL_TYPE.ARCHETYPE || (proposal.__typename === PROPOSAL_TYPE.EDIT && proposal.original?.[0].role)
+      return proposal?.__typename === PROPOSAL_TYPE.ROLE || proposal?.__typename === PROPOSAL_TYPE.ARCHETYPE || (proposal?.__typename === PROPOSAL_TYPE.EDIT && proposal.original?.[0].role)
     },
 
     async fetchComment (commentId) {
@@ -1501,7 +1501,7 @@ export default {
           proposal-item.bottom-no-rounded(v-if="ownAssignment" background="white" :proposal="proposal" :clickable="ownAssignment" :expandable="true" :owner="true" :moons="true" @claim-all="$emit('claim-all')" @change-deferred="(val) => $emit('change-deferred', val)" :selectedDao="selectedDao" :daoSettings="daoSettings" :votingPercentages="votingPercentages")
           .separator-container(v-if="ownAssignment")
             q-separator(color="grey-3" inset)
-          proposal-view(:proposal="optimisticProposal ? optimisticProposal : proposal" :ownAssignment="ownAssignment" :class="{'top-no-rounded': ownAssignment}" :withToggle="toggle(proposal)" :created="proposalParsing.created(proposal)" :restrictions="proposalParsing.restrictions(proposal)" :status="proposalParsing.status(proposal)" :docId="proposalParsing.docId(proposal)" :creator="proposalParsing.creator(proposal)" :capacity="proposalParsing.capacity(proposal)" :deferred="proposalParsing.deferred(proposal)" :description="proposalParsing.description(proposal)" :periodCount="proposalParsing.periodCount(proposal)" :salary="proposalParsing.salary(proposal)" :start="proposalParsing.start(proposal)" :subtitle="!ownAssignment ? proposalParsing.subtitle(proposal) : undefined" :title="!ownAssignment ? proposalParsing.title(proposal) : undefined" :type="proposal.__typename === 'Suspend' ? proposal.suspend[0].__typename : proposal.__typename" :url="proposalParsing.url(proposal)" :icon="proposalParsing.icon(proposal)" :commit="proposalParsing.commit(optimisticProposal ? optimisticProposal : proposal)" :compensation="proposalParsing.compensation(optimisticProposal ? optimisticProposal : proposal, daoSettings)" :tokens="proposalParsing.tokens(optimisticProposal ? optimisticProposal : proposal, periodsOnCycle, daoSettings, isDefaultBadgeMultiplier)" :isBadge="isBadge" :pastQuorum="proposalParsing.pastQuorum(proposal)" :pastUnity="proposalParsing.pastUnity(proposal)" :votingMethod="proposalParsing.votingMethod(proposal)" :parentCircle="proposalParsing.parentCircle(proposal)" @change-deferred="onDeferredUpdate" @change-commit="onCommitUpdate")
+          proposal-view(:proposal="optimisticProposal ? optimisticProposal : proposal" :ownAssignment="ownAssignment" :class="{'top-no-rounded': ownAssignment}" :withToggle="toggle(proposal)" :created="proposalParsing.created(proposal)" :restrictions="proposalParsing.restrictions(proposal)" :status="proposalParsing.status(proposal)" :docId="proposalParsing.docId(proposal)" :creator="proposalParsing.creator(proposal)" :capacity="proposalParsing.capacity(proposal)" :deferred="proposalParsing.deferred(proposal)" :description="proposalParsing.description(proposal)" :periodCount="proposalParsing.periodCount(proposal)" :salary="proposalParsing.salary(proposal)" :start="proposalParsing.start(proposal)" :subtitle="!ownAssignment ? proposalParsing.subtitle(proposal) : undefined" :title="!ownAssignment ? proposalParsing.title(proposal) : undefined" :type="proposal?.__typename === 'Suspend' ? proposal.suspend[0].__typename : proposal?.__typename" :url="proposalParsing.url(proposal)" :icon="proposalParsing.icon(proposal)" :commit="proposalParsing.commit(optimisticProposal ? optimisticProposal : proposal)" :compensation="proposalParsing.compensation(optimisticProposal ? optimisticProposal : proposal, daoSettings)" :tokens="proposalParsing.tokens(optimisticProposal ? optimisticProposal : proposal, periodsOnCycle, daoSettings, isDefaultBadgeMultiplier)" :isBadge="isBadge" :pastQuorum="proposalParsing.pastQuorum(proposal)" :pastUnity="proposalParsing.pastUnity(proposal)" :votingMethod="proposalParsing.votingMethod(proposal)" :parentCircle="proposalParsing.parentCircle(proposal)" @change-deferred="onDeferredUpdate" @change-commit="onCommitUpdate")
           comments-widget(v-if="!isBadge" :comments="comments" :disable="expired" @create="createComment" @update="updateComment" @delete="deleteComment" @like="likeComment" @unlike="unlikeComment" @load-comment="fetchComment")
         .col-12.col-lg-3(v-if="!isBadge" :class="{ 'q-pl-md': $q.screen.gt.md }")
           widget.bg-primary(v-if="proposalParsing.status(proposal) === PROPOSAL_STATE.DRAFTED && isCreator && state === 'WAITING'")
@@ -1559,10 +1559,10 @@ export default {
       )
       .separator-container(v-if="ownAssignment")
         q-separator(color="grey-3" inset)
-      proposal-view(:proposal="optimisticProposal ? optimisticProposal : proposal" :ownAssignment="ownAssignment" :class="{'top-no-rounded': ownAssignment}" :withToggle="toggle(proposal)" :created="proposalParsing.created(proposal)" :restrictions="proposalParsing.restrictions(proposal)" :status="proposalParsing.status(proposal)" :docId="proposalParsing.docId(proposal)" :creator="proposalParsing.creator(proposal)" :capacity="proposalParsing.capacity(proposal)" :deferred="proposalParsing.deferred(proposal)" :description="proposalParsing.description(proposal)" :periodCount="proposalParsing.periodCount(proposal)" :salary="proposalParsing.salary(proposal)" :start="proposalParsing.start(proposal)" :subtitle="!ownAssignment ? proposalParsing.subtitle(proposal) : undefined" :title="!ownAssignment ? proposalParsing.title(proposal) : undefined" :type="proposal.__typename === 'Suspend' ? proposal.suspend[0].__typename : proposal.__typename" :url="proposalParsing.url(proposal)" :icon="proposalParsing.icon(proposal)" :commit="proposalParsing.commit(optimisticProposal ? optimisticProposal : proposal)" :compensation="proposalParsing.compensation(optimisticProposal ? optimisticProposal : proposal, daoSettings)" :tokens="proposalParsing.tokens(optimisticProposal ? optimisticProposal : proposal, periodsOnCycle, daoSettings, isDefaultBadgeMultiplier)" :isBadge="isBadge" :pastQuorum="proposalParsing.pastQuorum(proposal)" :pastUnity="proposalParsing.pastUnity(proposal)" :purpose="proposalParsing.purpose(proposal)" :votingMethod="proposalParsing.votingMethod(proposal)" :parentCircle="proposalParsing.parentCircle(proposal)" @change-deferred="onDeferredUpdate" @change-commit="onCommitUpdate")
+      proposal-view(:proposal="optimisticProposal ? optimisticProposal : proposal" :ownAssignment="ownAssignment" :class="{'top-no-rounded': ownAssignment}" :withToggle="toggle(proposal)" :created="proposalParsing.created(proposal)" :restrictions="proposalParsing.restrictions(proposal)" :status="proposalParsing.status(proposal)" :docId="proposalParsing.docId(proposal)" :creator="proposalParsing.creator(proposal)" :capacity="proposalParsing.capacity(proposal)" :deferred="proposalParsing.deferred(proposal)" :description="proposalParsing.description(proposal)" :periodCount="proposalParsing.periodCount(proposal)" :salary="proposalParsing.salary(proposal)" :start="proposalParsing.start(proposal)" :subtitle="!ownAssignment ? proposalParsing.subtitle(proposal) : undefined" :title="!ownAssignment ? proposalParsing.title(proposal) : undefined" :type="proposal?.__typename === 'Suspend' ? proposal.suspend[0].__typename : proposal?.__typename" :url="proposalParsing.url(proposal)" :icon="proposalParsing.icon(proposal)" :commit="proposalParsing.commit(optimisticProposal ? optimisticProposal : proposal)" :compensation="proposalParsing.compensation(optimisticProposal ? optimisticProposal : proposal, daoSettings)" :tokens="proposalParsing.tokens(optimisticProposal ? optimisticProposal : proposal, periodsOnCycle, daoSettings, isDefaultBadgeMultiplier)" :isBadge="isBadge" :pastQuorum="proposalParsing.pastQuorum(proposal)" :pastUnity="proposalParsing.pastUnity(proposal)" :purpose="proposalParsing.purpose(proposal)" :votingMethod="proposalParsing.votingMethod(proposal)" :parentCircle="proposalParsing.parentCircle(proposal)" @change-deferred="onDeferredUpdate" @change-commit="onCommitUpdate")
       comments-widget(v-if="!isBadge" :comments="comments" :disable="expired" @create="createComment" @update="updateComment" @delete="deleteComment" @like="likeComment" @unlike="unlikeComment" @load-comment="fetchComment")
     .col-12.col-sm-3(:class="{ 'q-pl-md': $q.screen.gt.sm }")
-      widget.q-mb-md.position-relative(v-if="proposalParsing.status(proposal) === PROPOSAL_STATE.APPROVED && proposal.__typename === PROPOSAL_TYPE.QUEST_START && !claimPayments.length" :title="$t('pages.proposals.proposaldetail.questCompletion')")
+      widget.q-mb-md.position-relative(v-if="proposalParsing.status(proposal) === PROPOSAL_STATE.APPROVED && proposal?.__typename === PROPOSAL_TYPE.QUEST_START && !claimPayments.length" :title="$t('pages.proposals.proposaldetail.questCompletion')")
         .text-ellipsis.text-body.q-my-xl {{ $t('pages.proposals.proposaldetail.didYouFinish') }}
         q-btn.full-width.q-mt-xl.q-px-lg(rounded color="primary" no-caps @click="onQuestPayout") {{ $t('pages.proposals.proposaldetail.claimYourPayment') }}
       widget.bg-primary(v-if="proposalParsing.status(proposal) === PROPOSAL_STATE.DRAFTED && isCreator && state === 'WAITING'")
diff --git a/src/pages/proposals/create/StepDuration.vue b/src/pages/proposals/create/StepDuration.vue
index 93c6579d9..2fdfd0306 100644
--- a/src/pages/proposals/create/StepDuration.vue
+++ b/src/pages/proposals/create/StepDuration.vue
@@ -1,18 +1,56 @@
 <script>
-import { date } from 'quasar'
 import { mapGetters } from 'vuex'
+import gql from 'graphql-tag'
+import { date } from 'quasar'
 import { dateToString } from '~/utils/TimeUtils'
 
 const MAX_PERIODS = 26
 const DEFAULT_PERIOD_COUNT = 12
 
+function monthDiff(_dateFrom, _dateTo) {
+  const dateFrom = new Date(_dateFrom)
+  const dateTo = new Date(_dateTo)
+  return dateTo.getMonth() - dateFrom.getMonth() +
+   (12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
+}
+
+const UPCOMING_PERIODS_QUERY = `
+  getDao(docId: $daoId) {
+    __typename
+    id: docId
+
+    calendar {
+      __typename
+      id: docId
+
+      period(
+        filter: { details_startTime_t: { ge: $start } }
+        first: $count
+        offset: $page
+      ) {
+        __typename
+        id: docId
+        details_label_s
+        details_startTime_t
+        docId
+        next {
+          __typename
+          id: docId
+          end: details_startTime_t
+        }
+      }
+    }
+  }
+`
+
 export default {
   name: 'step-duration',
   components: {
+    CreationStepper: () => import('~/components/proposals/creation-stepper.vue'),
     LoadingSpinner: () => import('~/components/common/loading-spinner.vue'),
-    Widget: () => import('~/components/common/widget.vue'),
-    CreationStepper: () => import('~/components/proposals/creation-stepper.vue')
+    Widget: () => import('~/components/common/widget.vue')
   },
+
   props: {
     disablePrevButton: Boolean,
     fields: Object,
@@ -22,35 +60,22 @@ export default {
 
   apollo: {
     periods: {
-      query: require('~/query/periods-upcoming.gql'),
-      update: data => data?.getDao?.calendar[0]?.period || [],
+      query: gql`query periodsUpcoming($daoId: String!, $start: DateTime!, $count: Int!, $page: Int) { ${UPCOMING_PERIODS_QUERY} }`,
+      update: data => data.getDao.calendar[0].period,
+      skip () { return !this.selectedDao?.docId },
       variables () {
         return {
-          daoId: this.selectedDao?.docId,
-          after: this.periodAfterDate
+          start: new Date(this.startDate),
+          count: this.size,
+          daoId: this.selectedDao.docId,
+          page: 0
         }
       },
-      skip () {
-        return this.selectedDao?.docId === undefined
-      },
       result (res) {
-        const v = res.data.getDao.calendar[0].period
-        this.periodCount = this.isExtension ? DEFAULT_PERIOD_COUNT : DEFAULT_PERIOD_COUNT
-        if ((this.isFromDraft && v?.length > 0 && !this.resetPeriods) || this.isExtension) {
-          const startPeriod = this.$store.state.proposals.draft.startPeriod
-          const periodCount = this.$store.state.proposals.draft.periodCount
-          const index = v.findIndex(el => el.docId === startPeriod.docId)
-          this.startIndex = index
-          this.endIndex = index + periodCount - 1
-          this.originalEndIndex = this.endIndex
-          const start = new Date(this.start(v[this.startIndex]))
-          const from = date.formatDate(start, 'YYYY/MM/DD')
-          const to = this.endIndex
-          this.setRangeToCalendar(from, to)
-        }
-        if (!this.isExtension) {
-          this.startValue = date.formatDate(v?.[0].details_startTime_t, 'YYYY/MM/DD')
-        }
+        const periods = res.data.getDao.calendar[0].period
+
+        if (!this.periodCount) this.periodCount = DEFAULT_PERIOD_COUNT
+        if (!this.startDate) this.startDate = periods[0].details_startTime_t
       },
       fetchPolicy: 'no-cache'
     }
@@ -59,176 +84,155 @@ export default {
   data () {
     return {
       MAX_PERIODS: MAX_PERIODS,
-      extendedPeriods: 0,
-      isFromDraft: false,
-      originalEndIndex: undefined,
-      startIndex: 1,
-      endIndex: -1,
-      resetPeriods: false,
-      dateDuration: {
-        from: Date.now().toString(),
-        to: Date.now().toString()
-      },
-      startValue: ''
+      size: MAX_PERIODS * 2,
+      page: 0
     }
   },
-  async mounted () {
-    await this._initParams()
-  },
-  async activated () {
-    await this._initParams()
-  },
+
   computed: {
     ...mapGetters('dao', ['selectedDao']),
-    periodAfterDate () {
-      if (this.isFromDraft) {
-        return this.startDate
-      }
-      return new Date().toISOString()
-    },
-    originalPeriodCount () {
-      return this.$store.state.proposals.draft.original?.details_periodCount_i || 0
-    },
-    lastOriginalIndex () {
-      return this.startIndex + this.originalPeriodCount - 1
+
+    availableDates () {
+      return this.periods && this.periods.map(_ => date.formatDate(_.details_startTime_t, 'YYYY/MM/DD'))
     },
+
     nextDisabled () {
-      return (this.periodCount - this.originalPeriodCount) < 1 || (this.periodCount - this.originalPeriodCount) >= MAX_PERIODS
+      return this.periodCount < 1 || this.periodCount >= MAX_PERIODS
     },
+
+    durationString () {
+      const start = new Date(this.startDate)
+      const end = new Date(this.endDate)
+
+      return `from ${dateToString(start, start.getFullYear() !== end.getFullYear())} to ${dateToString(end)}`
+    },
+
     startDate: {
       get () {
-        return this.$store.state.proposals.draft.startDate || ''
+        return date.formatDate(this?.$store?.state?.proposals?.draft?.startPeriod?.details_startTime_t || new Date(), 'YYYY/MM/DD')
       },
 
       set (value) {
-        this.$store.commit('proposals/setStartDate', value)
+        this.$store.commit('proposals/setStartPeriod', this.periods[this.getStartIndex(value)])
       }
     },
+
     periodCount: {
       get () {
-        if (this.startIndex === -1 || this.endIndex === -1) {
-          return 0
-        }
-        return this.endIndex - this.startIndex + 1
+        return this.$store.state.proposals.draft.periodCount
       },
+
       set (value) {
-        this.setEndIndex(Number(value) + this.startIndex - 1)
         this.$store.commit('proposals/setPeriodCount', Number(value))
       }
     },
 
-    dateString () {
-      if (this.startIndex === -1 || this.endIndex === -1) {
-        return ''
+    endDate () {
+      const index = this.getEndIndex()
+      if (this.periods && this.periods.length - 1 >= index) {
+        return this.periods[index].details_startTime_t
       }
-      const start = new Date(this.start(this.periods[this.startIndex]))
-      const end = new Date(this.start(this.periods[this.endIndex + 1]))
-      return `from ${dateToString(start, start.getFullYear() !== end.getFullYear())} to ${dateToString(end)}`
-    },
-
-    isExtension () {
-      return this.$store.state.proposals.draft.isExtension
+      return ''
     }
+
   },
+
   watch: {
-    dateString (v) {
-      if (v.length > 0 && this.periodCount > 0) {
-        if (this.periods && this.periods) {
-          this.$store.commit('proposals/setStartPeriod', this.periods[this.startIndex])
-          if (this.isExtension) {
-            this.startValue = date.formatDate(this.periods[this.startIndex].details_startTime_t, 'YYYY/MM/DD')
-          }
-        }
-        this.$store.commit('proposals/setPeriodCount', this.periodCount)
-        this.$store.commit('proposals/setDetailsPeriod', {
-          dateString: v
-        })
-      }
-    },
-    extendedPeriods () {
-      this.endIndex = this.lastOriginalIndex + this.extendedPeriods
-    },
-    startValue: {
-      handler: function () {
-        if (this.startValue) {
-          const startIndex = this.periods.findIndex(
-            el => new Date(el.details_startTime_t).toDateString() === new Date(this.startValue).toDateString()
-          )
-          this.startIndex = startIndex
-          this.periodCount = this.$store.state.proposals.draft.periodCount
-        } else {
-          this.startIndex = -1
-        }
-      }
-    }
+
   },
 
-  // TODO: Move to shared place?
   methods: {
-    async _initParams () {
-      this.isFromDraft = false
-      this.startDate = undefined
-      this.originalEndIndex = undefined
-      const startPeriod = this.$store.state.proposals.draft.startPeriod
-      const endIndex = this.$store.state.proposals.draft.endIndex
-      // const periodCount = this.$store.state.proposals.draft.periodCount
-      await this.$nextTick()
-      if (startPeriod && endIndex) {
-        this.isFromDraft = true
-        this.startDate = startPeriod.details_startTime_t
-        this.endIndex = endIndex
-      }
-    },
-    isInvalidDate (date) {
-      return date.includes('/')
-    },
-    getFormatDate (_date) {
-      const date = new Date(new Date(_date) + (this.$store.state.dao.settings.votingDurationSec * 1000))
-      // const dateString = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)}`
-      // return dateString
-      return date.toISOString()
-    },
-    datePickerOptions (date) {
-      return this.enableOnlyPeriods(date) && this.disableOldDates(date)
-    },
-    disableOldDates (date) {
-      const today = new Date().toISOString().split('T')[0].replaceAll('-', '/')
-      return date >= today
-    },
-    // TODO: This can be optimized
-    enableOnlyPeriods (date) {
-      if (!this.periods) return false
-      const periodArray = this.periods
-      const todayDate = new Date(date)
-      todayDate.setHours(0, 0, 0, 0)
-      for (let index = 0; index < periodArray.length; index++) {
-        const element = periodArray[index]
-        const elementDate = new Date(element.details_startTime_t)
-        elementDate.setHours(0, 0, 0, 0)
-        if (+todayDate === +elementDate) {
-          return true
-        }
-      }
-      return false
-    },
-    async setRangeToCalendar (from, to) {
-      await this.$nextTick()
-      this.startValue = from
-      this.endIndex = to
+    formatDate: date.formatDate,
+
+    getStartIndex (startDate) {
+      return this.periods && startDate && this.periods.findIndex(
+        _ => new Date(_.details_startTime_t).toDateString() === new Date(startDate).toDateString()
+      )
     },
-    title (period) {
-      return 'Until'
-      // return period && period.details_label_s
+
+    getEndIndex () {
+      return this.getStartIndex(this.startDate) + this.periodCount
     },
 
-    start (period) {
-      return period && new Date(period.details_startTime_t)
+    isDateAvaiable (date) { return this.availableDates ? this.availableDates.includes(date) : true },
+
+    onDateChanged (value, reason, details) {
+      console.log({ value, reason, details })
     },
-    setEndIndex (index) {
-      this.endIndex = index
-      this.$store.commit('proposals/setEndIndex', this.endIndex)
+
+    onDateNavigate ({ month, year }) {
+      const newStartPeriodsDate = new Date(this.startDate)
+      // newStartPeriodsDate.setDate(1)
+      newStartPeriodsDate.setMonth(month - 1)
+      newStartPeriodsDate.setFullYear(year)
+
+      const diffrenceInMonths = monthDiff(this.startDate, newStartPeriodsDate)
+
+      const page = Math.floor(diffrenceInMonths / 5.5555)
+      if (this.page !== page) {
+        this.page = page
+        this.$apollo.queries.periods.fetchMore({
+        // New variables
+          variables: {
+            page: this.page * this.size
+          },
+          // Transform the previous result with new data
+          updateQuery: (previousResult, { fetchMoreResult }) => {
+            console.log(previousResult)
+            console.log({
+              getDao: {
+                calendar: [
+                  {
+                    period: [
+                      ...previousResult.getDao.calendar[0].period,
+                      ...fetchMoreResult.getDao.calendar[0].period
+                    ]
+                  }
+                ]
+
+              }
+            })
+            return {
+              getDao: {
+                ...previousResult.getDao,
+                calendar: [
+                  {
+                    period: [
+                      ...previousResult.getDao.calendar[0].period
+                      // ...fetchMoreResult.getDao.calendar[0].period
+                    ]
+                  }
+                ]
+
+              }
+
+            }
+            // const newTags = fetchMoreResult.tagsPage.tags
+            // const hasMore = fetchMoreResult.tagsPage.hasMore
+
+            // this.showMoreEnabled = hasMore
+
+            // data.getDao.calendar[0].period
+
+          // return {
+          //   tagsPage: {
+          //     __typename: previousResult.tagsPage.__typename,
+          //     // Merging the tag list
+          //     tags: [...previousResult.tagsPage.tags, ...newTags],
+          //     hasMore,
+          //   },
+          // }
+          }
+        })
+      }
     }
+
+  },
+
+  updated () {
+    console.log(JSON.stringify(this.periods.length))
   }
+
 }
 </script>
 
@@ -240,22 +244,35 @@ widget
       .q-gutter-sm(:class="{ 'row': $q.screen.gt.md }")
         .col.select-date-block.relative
           label.h-h7 {{ $t('pages.proposals.create.stepduration.startDate') }}
-          q-input.rounded-border.col.q-mt-xs(dense outlined rounded v-model="startValue")
+          q-input.rounded-border.col.q-mt-xs(dense outlined rounded v-model="startDate")
             template(v-slot:append)
               q-icon(size="xs" name="fa fa-calendar-alt")
-          q-date.bg-internal-bg.calendar.absolute.z-top(no-unset :options="datePickerOptions" minimal="minimal" ref="calendar" v-model="startValue" rounded)
+          q-date.bg-internal-bg.calendar.absolute.z-top(
+            :options="isDateAvaiable"
+            @input="onDateChanged"
+            @navigation="onDateNavigate"
+            minimal="minimal"
+            ref="calendar"
+            rounded
+            v-model="startDate"
+          )
+
         .col
           label.h-h7 {{ $t('pages.proposals.create.stepduration.periods') }}
-          q-input.rounded-border.col.q-mt-xs(dense outlined rounded v-model="periodCount")
+          q-input.rounded-border.col.q-mt-xs(dense outlined rounded v-model="periodCount" :max="MAX_PERIODS")
           q-tooltip {{ $t('pages.proposals.create.stepduration.1MoonPeriod') }}
+
         .col
           label.h-h7 {{ $t('pages.proposals.create.stepduration.endDate') }}
-          q-input.rounded-border.col.q-mt-xs(dense filled rounded disable v-model="dateString")
+          q-input.rounded-border.col.q-mt-xs(dense filled rounded disable v-model="durationString")
+
     .row.justify-center(v-if="$apolloData.queries.periods.loading")
       q-spinner-tail(size="md")
-  .confirm.q-mt-xl(v-if="startIndex >= 0 && endIndex >= 0")
+
+  .confirm.q-mt-xl
     .text-negative.h-b2.q-ml-xs.text-center(v-if="periodCount >= MAX_PERIODS") {{ $t('pages.proposals.create.stepduration.youMustSelect', { '1': MAX_PERIODS, '2': periodCount }) }}
     .text-negative.h-b2.q-ml-xs.text-center(v-if="periodCount < 0") {{ $t('pages.proposals.create.stepduration.theStartDate') }}
+
   .next-step.q-mt-xl
     .row.items-center(:class="{'justify-between': !$store.state.proposals.draft.edit, 'justify-end': $store.state.proposals.draft.edit}")
       nav.row.justify-end.full-width.q-gutter-xs(v-if="$q.screen.gt.md")