vue-mark-calendar

🏆 fork from vue-calendar

修改自 vue-calendar，非常感谢作者🙏提供这么好用的插件。

修改原因

公司项目开发过程中需要用到不同日期的标记，发现了 vue-calendar，但是由于公司使用的是 element-ui ，因此配色上有较大的出入，这是修改的主要原因。 还有一个原因是公司项目中用到的日期格式都是 '2019-04-01'，而插件中使用的格式是 '2019/04/01'，使用过程中会出现一层转换，并且插件返回的值月份日期小于 9 时不会添 0，还有一些另外的定制化需求，因此做了一些调整。

在线 Demo

Install

npm i vue-mark-calendar --save
yarn add vue-mark-calendar

Usage

// 基本用法
<Calendar
  ref="Calendar"
  :markDate="markDate"
  :markDateMore="markDateMore"
  >
</Calendar>

//css,element-ui的选中效果有两层背景颜色，因此我在原来结构上加了一层标签，并加上了 class：wh_item_date_text，
如果需要 element-ui 的选中样式，则背景颜色需要加在 wh_item_date_text 上，否则可以不加 wh_item_date_text
具体效果可自行尝试。

.wh_container >>> .mark1 .wh_item_date_text{
  background-color: #0fc37c;
  color: #fff;
}

.wh_container >>> .mark2 .wh_item_date_text{
  background-color: #ad4a95;
  color: #fff;
}

//vue文件中引入
import Calendar from 'vue-mark-calendar';
export default {
  components: {
    Calendar
  },
  data(){
    return {
      markDate: ['2019-04-23','2019-04-24'],
      markDateMore: [
        {
          date: "2019-04-01",
          className: "mark1"
        },
        {
          date: "2019-04-02",
          className: "mark1"
        },
        {
          date: "2019-04-03",
          className: "mark2"
        },
        {
          date: "2019-04-04",
          className: "mark2"
        },
      ]
    }
  }
}
// 使用 Methods
this.$refs.Calendar.changeMonth('2018-01-01') //跳转后选中 2018-01-01
this.$refs.Calendar.changeMonth('2018-01-01', false) //跳转后不选中 2018-01-01

如仍有疑问可看 Demo。

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------ | ------ | ------ | ------ | | markDate | 单一标注，传入日期数组["2018/2/2","2018/2/6"] | Array | - | [] | | markDateMore | 多种标记，使用方法见 Usage | Array | - | [] | | agoDayHide | 某个日期以前的不允许点击 时间戳长度是 10 位 | String | - | 0 | | futureDayHide | 某个日期以后的不允许点击 时间戳长度是 10 位 | String | - | 2554387200 | | sundayStart | 默认是周一开始 当是true的时候 是周日开始 | Boolean | true/false | false | | textTop | 日历头部的文字 | Array | - | [ '日','一', '二', '三', '四', '五', '六'] | | borderRadius | 整个日历块的圆角 | String | - | 4px | | showToday | 在日历中高亮今天的日期 | Boolean | true/false | true | | canChoose | 日历中日期能否选择 | Boolean | true/false | true |

Events

| 事件名称 | 说明 | 回调参数 | | ------ | ------ | ------ | | choseDay | 选中某天的回调 | YY-MM-DD | | changeMonth | 切换月份的回调 | YY-MM-DD | | isToday | 切换月份的时候，只有切到当月才会调用这个方法，返回今天的日期 | YY-MM-DD |

Methods

| 事件名称 | 说明 | 参数 | | ------ | ------ | ------ | | changeMonth | 切换月份，日期格式：YYYY-MM-DD，isChoose默认为 true,跳转后自动选中跳转日期 | (date,isChoose) | | PreMonth | 跳转到上月 | - | | NextMonth | 跳转到上月 | - |