更新记录

0.1.2（2020-03-25） 下载此版本

更新自动屏幕适配功能

0.1.1（2020-03-24） 下载此版本

这几日公司要将一个一上线的一个H5改成小程序上线，里面用到了mpvue-calendar，但是应用商城中又没有，突发奇想手改他之前的源码，这个uni版的mpvue-calendar就诞生了，目前实际测试H5与小程序均无问题，希望有问题及时留言，后续更新

平台兼容性

mpvue-calendar

基于vue-calendar的适配mpvue平台的的微信小程序日历组件，现在已可以使用在浏览器端

预览

🖥 点击浏览器端预览

安装

npm i mpvue-calendar

使用

• import Calendar from 'mpvue-calendar' 引入组件
• import 'mpvue-calendar/src/style.css' 引入样式文件(mpvue 小程序端)
• components中注册组件Calendar
• template中使用组件<Calendar />

⚠️在浏览器端使用要引入下面browser-style.css替换上面的style.css

• import 'mpvue-calendar/src/browser-style.css' 引入样式文件(浏览器端)

参数及方法

• value 参数
  在普通模式下value为一维数组如2018年6月21为[2018,6,21]
  在range和multi模式下value为二维数组，如multi模式选中2018年6月21和6月28为[[2018,6,21], [2018,6,28]]
  在range模式下如果定义value参数必须定义开始日期和结束日期，如[[2018,6,21], [2018,6,28]](⚠️从开始日期到结束日期)。若需要清空选中value时，将value参数设置为[](空数组)即可
• events 参数
  events为自定义备注，例如备注2018年6月21日为{'2018-6-21': '今日备注', '2018-6-22':'明日备注'}，在clean模式下备注为圆点，lunar农历模式下备注会替代农历优先展示
• now 参数
  now参数可以选择是否将今天日期展示为今字，传入false则不展示，传入字符串则展示你定义等字符串内容，默认为true展示今字样
• tileContent 参数
  tileContent参数可以为具体某日定义一个class名，还可以插入一段文本内容。如[{date: '2018-9-20', className: 'holiday', content: '休'}]可以设置2018-9-20这天的class名为holiday，并且生成一个文本内容为 休 的dom节点

示例

<template>
  <div>
    <Calendar
      :months="months"
      :value="value"
      @next="next"
      @prev="prev"
      :events="events"
      lunar
      clean
      @select="select"
      ref="calendar"
      @selectMonth="selectMonth"
      @selectYear="selectYear"
      :arrowLeft="arrowLeft"
      :tileContent="tileContent"
      :almanacs="almanacs"
    />
    <button @click="setToday">返回今日</button>
    <button @click="dateInfo">日期信息</button>
    <button @click="renderer">重新渲染年月日期</button>
  </div>
</template>

<script>
import Calendar from 'mpvue-calendar'
import 'mpvue-calendar/src/style.css'
import arrowLeft from '../assets/arrowLeft.png' //使用自定义箭头图片

export default {
  data () {
    return {
      months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      disabledArray: ['2018-6-27','2018-6-25'],
      value: [2018,6,7],
      begin:[2016,1,1],
      end:[2020,1,1],
      events: {'2018-6-7':'今日备注', '2018-6-8':'一条很长的明日备注'},
      almanacs: {'9-3': '抗战胜利日', '11-17': '学生日'},
      tileContent: [
          {date: '2018-9-22', className: 'holiday ', content: '休'},
          {date: '2018-9-23', className: 'holiday ', content: '休'}
      ],
      arrowLeft: arrowLeft
    }
  },
  components: {
    Calendar
  },
  methods: {
    prev(year, month, weekIndex) {
      console.log(year, month, weekIndex)
    },
    next(year, month, weekIndex) {
      console.log(year, month, weekIndex)
    },
    selectYear(year) {
      console.log(year)
    },
    selectMonth(month, year) {
      console.log(year, month)
    },
    setToday() {
      this.$refs.calendar.setToday()
    },
    dateInfo() {
      const info = this.$refs.calendar.dateInfo(2018, 8, 23)
      console.log(info);
    },
    renderer() {
      this.$refs.calendar.renderer(2018, 8); //渲染2018年8月份
    },
    select(val, val2) {
      console.log(val)
      console.log(val2)
    }
  }
}
</script>