vue-mobcal

vue mobcal demo

by hoythan

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-mobcal/dist/vue-mobcal.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-mobcal/dist/vue-mobcal.umd.min.js"></script>
<div id="app">
  <vue-mob-cal v-model="currentDate" :mode.sync="mode">
    <template #left>
      <span>LeftBtn</span>
    </template>
    <template #right>
      <span>RightBtn</span>
    </template>
    <template #week="props">
      <span>周{{ props.day | week }}</span>
    </template>
    <template #day="props">
      <span v-if="props.util.isToday(props.day)">今</span>
      <span v-else>{{ props.day.getDate() }}</span>
      <!-- A dot will appear at the bottom -->
      <span v-if="props.day.getDay() === 1" class="mindot" style="background-color: red;"></span>
      <span v-if="props.day.getDay() === 6" class="mindot"></span>
      <!-- If you want to display the background, you have to configure this -->
      <span class="dot"></span> 
    </template>
  </vue-mob-cal>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    mode: 'month',
    currentDate: new Date()
  },
  filters: {
    week (day) {
      const days = ['一', '二', '三', '四', '五', '六', '日']
      day = day || 7
      return days[day - 1]
    }
  }
})