m-calendar-panel1 v1.0.15

m-calendar-panel v1.0.1

Installation

Using yarn:

    $ npm i -g yarn
    $ yarn add m-calendar-panel -D

Use

    <template>
        <m-calendar-panel></m-calendar-panel>
    </template>

    <script>
        import MCalendarPanel from 'm-calendar-panel'

        export default {
            components: { MCalendarPanel }
        }
    </script>

Option

// 以下所有选项均为非必填项
// 属性名[type][默认值]: 字段说明
Attributes = {
    width[String]['100%']: 日历宽度，可传入百分比/实际的px,

    date[Date, String][new Date()]: 当前日历展示的年月，字符串格式为'2021-05'，默认展示今年当月，如果值和select传入值冲突，展示页以'date'为准,

    select[Date, String][]: 选中项，默认无选中项，字符串格式为'2021-05-18'，可通过'v-model'绑定,
    select-color[String]['']: 选中日期时的颜色，默认跟随主题色,

    began-monday[Boolean][false]: 日历是否从周一开始，默认为周日,

    show-lunar[Boolean][true]: 是否显示农历，默认显示,

    show-festival[Boolean][true]: 是否显示节日，默认显示,
    festival-color[String][]: 节日单独配置颜色，默认跟随主题色,

    theme[String]['white']: 主题 -> 'white'/'black',

    disabled[Boolean][false]: 日历是否可点击，设置不可点击仍然可以通过select/setSelectDate来设置选中项
}

Events = {
    select-change: 选中日期状态发生变化时的回调函数,
}

// 以下方法请确保日历加载完成后使用
// 以下示例默认在`<m-calendar-panel ref="m-calendar"></m-calendar-panel>`模板中使用
Methods = {
    setSelectDate: `this.$refs["m-calendar"].setSelectDate("2021-05-18")`，手动设置选中项
    getSolarLunarInfo: `this.$refs["m-calendar"].getSolarLunarInfo("2021-05-18")` => [Object]可获得传入日期的SolarLunarInfo
    toDoubleDigit: `this.$refs["m-calendar"].getSolarLunarInfo(5)` => [String]'05'，如果传入的数字/字符不足两位则补足两位，大于等于两位则返回它本身的字符串表示
}

SolarLunarInfo = {
    lunarYear: 农历年份,
    lunarMonth: 农历月份,
    lunarDay: 农历日期,
    year: 公历年份,
    month: 公历月份,
    day: 公历日期,
    isFestival: 是否有节日,
    festival: 节日数组,
    IMonthCn: 农历月份的大写(eg: '四月'，如果遇上闰月，返回'润四月'),
    IDayCn: 农历日期的大写(eg: '十一'),
    isLeap: 是否闰月,
    isTerm: 是否节气,
    Term: 返回当天节气
}