@pigsking/vue-mark-calendar NPM

vue-mark-calendar

一个基于 Vue 2.x 开发的日历标记组件，版本记录请在更新日志中查看。

:interrobang: Important

imarker 已不再维护, 请使用 vue-mark-calendar

:package: Install

npm install @pigsking/vue-mark-calendar
//or
yarn add @pigsking/vue-mark-calendar

:grey_question: Usage

// main.js
import Vue from 'vue'
import Calendar from '@pigsking/vue-mark-calendar'

Vue.use(Calendar)

:open_book: API

具体使用方法请查看具体相关示例

Props

markers

Type: Array
Usage:

<Calendar :markers="markers" />
export default{
    data(){
        return{
             markers: [
                {
                    date: "2020/12/20",
                    className: "dream",
                },
            ],
        }
    }
}

需要标记的天数

multiDayMarkers

Type: Boolean
Default: false
Usage:

<Calendar :multiDayMarkers="multiDayMarkers" />
export default{
    data(){
        return{
             multiDayMarkers: [
                {
                    startDate: "2020/11/10",
                    endDate: "2020/11/20",
                    className: "dream",
                },
             ]
        }
    }
}

一次标记多天

sundayBegin

Type: Boolean
Default: false
Usage:

<Calendar sundayBegin />

设置一周的开始为星期天

hideOtherMonthDay

Type: Boolean
Default: false
Usage:

<Calendar hideOtherMonthDay />

隐藏其它月份的天数

hideOtherMonthMarker

Type: Boolean
Default: false
Usage:

<Calendar hideOtherMonthMarker />

隐藏其它月份的标记

disabledFutureDay

Type: Boolean
Default: false
Usage:

<Calendar disabledFutureDay />

设置未来的天数不可点击

format

Type: String
Default: "YYYY/MM/DD"
Usage:

<Calendar format="YYYY-MM-DD" />

日期格式化形式,目前只支持 "YYYY/MM/DD"、"YYYY/M/D"、"YYYY-MM-DD"、"YYYY-M-D"

weekText

Type: Array
Default: ["一", "二", "三", "四", "五", "六", "日"]
Usage:

<Calendar :weekText="['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN']" />

周几的文字描述

hideMarker

Type: Boolean
Usage:

<Calendar hideMarker />

隐藏所有的标记

todayText

Type: String
Usage:

<Calendar todayText="今" />

周几的文字描述

disabledSwitchMonth

Type: Boolean
Default: false
Usage:

<Calendar disabledSwitchMonth />

禁用月份切换

Methods

chooseDate()

Arguments: {String} date string
Usage:

<Calendar ref="calendar" />
export default{
   mounted(){
       // 回到今天
       this.$refs.calendar.chooseDate()

       // 选中指定日期
       this.$refs.calendar.chooseDate('2020/12/20')
   }
}

选中某天，传参数时选中所传日期，不传参数时选中当天

getDateObj()

Arguments: {String} date string
Usage:

<Calendar ref="calendar" />
export default{
   mounted(){
       // 获取今天对象
      const todayInfo = this.$refs.calendar.getDateObj()

       // 选中指定日期对象
      const dayInfo = this.$refs.calendar.getDateObj('2020/12/20')
   }
}

获取日期对象，传参数时选中所传日期的对象，不传参数时获取当天日期对象

Events

date

Usage:

<Calendar @date="handleChooseDay($event)" />
export default{
   methods(){
       handleChooseDay(dayInfo){
        // dayInfo   
        // {
        //     "day":14, // 一个月中的第几天
        //     "date":"2020/02/14", // 该天日期
        //     "week":6, // 星期几
        //     "timestamp":1581609600, // 该天时间戳
        //     "isOtherMonthDay":false, // 该天是否为非本月
        //     "isFutureDay":false, // 该天是否为未来的天数
        //     "isToday":false // 某月中的某天是否为当天     
        // }
       }
   }
}

点击某天时的回调