Element calendar農歷日歷

element組件calendar目前不支持農歷日歷，故引用中國農歷（陰陽歷）和西元陽歷即公歷互轉JavaScript庫。

自定義該組件主要為了實現多選日期 和 高亮顯示節假日的功能。顯示效果如下：

 

1、為了能用簡單的html實現樣例程序，將calendar.js的export去掉，通過JS引用的方式實現。

<!--vue引入 -->
<script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>
<!--element-ui引入組件 --> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--calendar引入 -->
<script src="calendar.js"></script> 

<!-- element-ui引入樣式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

 

2、添加el-calendar組件。通過設置名為 dateCell 的 scoped-slot 來自定義日歷單元格中顯示的內容。在 scoped-slot 可以獲取到 date（當前單元格的日期）, data（包括 type，isSelected，day 屬性）。

<div id="app">
    <el-calendar v-model="value" style="width: 820px">
        <template slot="dateCell" slot-scope="{date, data}">
            <div :class="{ selected : isSelected(date, data) }">
                <div class="solar">{{ data.day.split('-')[2] }}</div>
                <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }}</div>
            </div>
        </template>
    </el-calendar>
</div>

 

3、JavaScript實現是否選中、自定義日歷顯示內容的功能

var Main = {
    data() {
        return {
            // 設置value，會自動顯示value對應月份，可以設置為selectedDates的第一個日期
            value: '2020-04-12',
            // 根據selectedDates設置選中日期
            selectedDates: ['2020-04-12','2020-04-15','2020-04-24']
        }
    },
    methods: {
        // 是否選中日期
        isSelected : function(slotDate, slotData) {
            return this.selectedDates.includes(slotData.day)
        },
        // 是否節假日
        isFestival(slotDate, slotData) {
            let solarDayArr = slotData.day.split('-');
            let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

            // 公歷節日\農歷節日\農歷節氣
            let festAndTerm = [];
            festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
            festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
            festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm != ''
        },
        // 公歷轉農歷
        solarToLunar(slotDate, slotData) {
            let solarDayArr = slotData.day.split('-');
            let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])

            // 農歷日期
            let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

            // 公歷節日\農歷節日\農歷節氣
            let festAndTerm = [];
            festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
            festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
            festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
            festAndTerm = festAndTerm.join('')

            return festAndTerm == '' ? lunarMD : festAndTerm
        }
    }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

 

4、CSS實現自定義顯示效果

    /**隱藏上一月、本月、下一月*/
    .el-calendar__button-group {
        display: none;
    }
    /**月份居中*/
    .el-calendar__title {
        width: 100%;
        text-align: center;
    }
    /**日期div的樣式*/
    .el-calendar-table tr td:first-child {
        border-left: 0px;
    }
    .el-calendar-table td {
        min-height: 110px;
        min-width: 110px;
        border-right: 0px;
    }
    .el-calendar-table td.is-selected {
        background-color: white;
    }
    .el-calendar-table .el-calendar-day {
        height: 100%;
        padding: 0px;
        text-align: center;
    }
    .el-calendar-table .el-calendar-day > div {
        height: 104px;
    }
    /**日期div的樣式-公歷*/
    .el-calendar-table .el-calendar-day > div .solar {
        padding-top: 30px;
    }
    /**日期div的樣式-農歷*/
    .el-calendar-table .el-calendar-day > div .lunar {
        padding-top: 10px;
    }
    /**日期div的樣式-選中*/
    .el-calendar-table .el-calendar-day > div.selected {
        background-color: #fef2f2;
        border: 3px solid #fb0;
        border-radius: 20px;
    }

    /**本月周末設置為紅色*/
    .el-calendar-table .current:nth-last-child(-n+2) .solar {
        color: red;
    }
    /**本月農歷設置為灰色*/
    .el-calendar-table .current .lunar {
        color: #606266;
    }
    /**本月農歷節日設置為紅色*/
    .el-calendar-table .current .lunar.festival {
        color: red;
    }
    /**禁用點擊效果*/
    /*.el-calendar-table td {*/
        /*pointer-events: none;*/
    /*}*/