vm

vue-mobcal

Vue Mobile Calendar - 基于 Vue2的移动端日历插件,仿钉钉签到日历,vue 钉钉日历, 自适应,周月切换

Showing:

Popularity

Downloads/wk

28

GitHub Stars

8

Maintenance

Last Commit

19d ago

Contributors

0

Package

Dependencies

4

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

     

vue-mobcal

vue GitHub stars npm GitHub issues license

NPM

Example

image.png


Install

npm install vue-mobcal --save

# or
yarn add vue-mobcal

Global Registration

import Vue from 'vue'
import VueMobCal from 'vue-mobcal'
import 'vue-mobcal/dist/vue-mobcal.css'

Vue.use(VueMobCal)

Local Registration

import { VueMobCal } from 'vue-mobcal'
import 'vue-mobcal/dist/vue-mobcal.css'

export default {
  components: {
    VueMobCal
  }
}

CDN

<link rel="stylesheet" href="https://unpkg.com/vue-mobcal/dist/vue-mobcal.css"/>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" 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">
    </vue-mob-cal>
</div>
<script type="text/javascript">
  new Vue({
      el: '#app',
      data: {
          mode: 'month',
          currentDate: new Date()
      }
  })
</script>

Usage

Basic Usage

<vue-mob-cal v-model="currentDate" :mode.sync="mode" color="#007873" />
export default {
  data() {
    return {
      currentDate: new Date(),
      mode: 'month'
    }
  }
}

Custom Slot

<vue-mob-cal v-model="currentDate" :mode.sync="mode">
  <template #left>
    <span>LeftBtn</span>
  </template>
  <template #right>
    <span>RightBtn</span>
  </template>
  <template #title>
    <span>Title</span>
  </template>
  <template #week="props">
    <span>周{{ props.day | week }}</span>
  </template>
  <template #day="props">
    <span v-if="props.util.isToday(props.date)"></span>
    <span v-else>{{ props.date.getDate() }}</span>
    <!-- A dot will appear at the bottom -->
    <span v-if="props.date.getDay() === 1" class="mindot" style="background-color: red;"></span>
    <span v-if="props.date.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>
export default {
  data() {
    return {
      currentDate: new Date(),
      mode: 'month'
    }
  },
  filters: {
    week (day) {
      const days = ['一', '二', '三', '四', '五', '六', '日']
      day = day || 7
      return days[day - 1]
    }
  }
}

API

Props

AttributeDescriptionTypeDefault
valueCurrent calendar dateDatenew Date()
modeDisplay mode, support monthly or weekly display, params monthweekStringmonth
colorTheme colorString#007ad3

Slot

NameDescriptionSlotProps
titleCustom title { util: object }
weekCustom Week Title{ day: number } 0-6
leftCustom left icon-
rightCustom right icon-
dayCustom Calendar Item { date: date, util: object }
- utilCommon method
{
 isToday: function,
 isWorkDay: function,
 isOtherMonth: function,
 isActiveDay: function,
 onPrev: function,
 onNext: function,
 onChangeMode: function
}

Event

EventDescriptionArguments
onPrevChange to last month/week-
onNextChange to next month/week-
onChangeModeToggles display mode or set display modemode:!string

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100