```html
<div class="demo-block" id="inline-calendar-demo1">
  <lx-inline-calendar
    v-model="value"
    class="inline-calendar-demo"
    :show="show"
    start-date="2016-04-01"
    end-date="2017-06-18"
    :range="range"
    :show-last-month="showLastMonth"
    :show-next-month="showNextMonth"
    :highlight-weekend="highlightWeekend"
    :return-six-rows="return6Rows"
    :hide-header="hideHeader"
    :hide-week-list="hideWeekList"
    :replace-text-list="replaceTextList"
    :weeks-list="weeksList"
    :custom-slot-fn="buildSlotFn"
    :disable-past="disablePast"
    :disable-future="disableFuture"
  ></lx-inline-calendar>
  <lx-group
    title="control days"
    style="margin-top: 30px;"
  >
    <lx-x-switch
      v-model="disablePast"
      title="Disable Past"
    ></lx-x-switch>
    <lx-x-switch
      v-model="disableFuture"
      title="Disable Future"
    ></lx-x-switch>
    <lx-x-switch
      v-model="showLastMonth"
      title="Show Last Month"
    ></lx-x-switch>
    <lx-x-switch
      v-model="showNextMonth"
      title="Show Next Month"
    ></lx-x-switch>
    <lx-x-switch
      v-model="return6Rows"
      inline-desc="if not, the calendar's height would change"
      title="Always show 6 rows"
    ></lx-x-switch>
    <lx-x-switch
      v-model="highlightWeekend"
      title="highlight weekend"
    ></lx-x-switch>
    <lx-cell
      title="current value"
      :value="value"
    ></lx-cell>
  </lx-group>
  <lx-group title="control navs">
    <lx-x-switch
      v-model="hideHeader"
      title="Hide header"
    ></lx-x-switch>
    <lx-x-switch
      v-model="hideWeekList"
      title="Hide week list"
    ></lx-x-switch>
    <lx-x-switch
      v-model="changeWeeksList"
      title="Change weeks list"
    ></lx-x-switch>
  </lx-group>
  <lx-group title="replace text">
    <lx-x-switch
      v-model="replace"
      title="Replace date text"
    ></lx-x-switch>
  </lx-group>
  <br>
  <div style="margin: 15px;">
    <lx-x-button
      type="primary"
      @click="value='2020-11-11'"
    >
      Set time to 2020-11-11
    </lx-x-button>
    <lx-x-button
      type="primary"
      @click="value='2020-11-22'"
    >
      Set time to 2020-11-22
    </lx-x-button>
    <lx-x-button
      type="primary"
      @click="value='2016-08-09'"
    >
      Set time to 2016-08-09
    </lx-x-button>
    <lx-x-button
      type="primary"
      @click="value='TODAY'"
    >
      Set time to today
    </lx-x-button>
    <lx-x-button
      type="primary"
      @click="value='2016-06-05'"
    >
      Set time to 2016-06-05
    </lx-x-button>
  </div>
  <br>
  <lx-group title="custom every day cell">
    <lx-x-switch
      v-model="useCustomFn"
      inline-desc="Add red dot for dates with 8"
      title="add custom contents in day cell"
    ></lx-x-switch>
  </lx-group>

  <br>

  <lx-divider>We can render a list of calendars order by month</lx-divider>
  <lx-group>
    <lx-cell
      title="current value"
      :value="listValue"
    ></lx-cell>
  </lx-group>
  <br>
  <div
    v-for="i in [1, 2, 3, 4, 5]"
    :key="i"
  >
    <lx-divider>2016 / {{ i }}</lx-divider>
    <lx-inline-calendar
      v-model="listValue"
      :render-month="[2016, i]"
      hide-header
      :return-six-rows="false"
      :show-last-month="false"
      :show-next-month="false"
      :render-on-value-change="false"
    ></lx-inline-calendar>
  </div>
</div>

<script>
// InlineCalendar.md
new Vue({
  el: '#inline-calendar-demo1',
  data: {
    show: true,
    value: '',
    listValue: '',
    range: false,
    showLastMonth: true,
    showNextMonth: true,
    highlightWeekend: false,
    return6Rows: true,
    hideHeader: false,
    hideWeekList: false,
    replaceTextList: {},
    replace: false,
    changeWeeksList: false,
    weeksList: [],
    useCustomFn: false,
    buildSlotFn: () => '',
    disablePast: false,
    disableFuture: false
  },
  watch: {
    replace (val) {
      this.replaceTextList = val ? {
        'TODAY': '今'
      } : {}
    },
    useCustomFn (val) {
      this.buildSlotFn = val ? (line, index, data) => {
        return /8/.test(data.day) ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>' : ''
      } : () => ''
    },
    changeWeeksList (val) {
      this.weeksList = val ? ['日', '一', '二', '三', '四', '五', '六 '] : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
    }
  }
})
</script>

<style>
.inline-calendar-demo {
  background: rgba(255,255,255,0.9);
}
</style>
```