效果預覽

全局引入

npm install ele-calendar

組件使用

<template><div><div><el-popoverplacement="bottom-start"width="410"trigger="click"v-model="isShow"><div><ele-calendarclass="mycalender":render-content="renderContent"value-format="yyyy-MM-dd"currentmonth:data="datedef":prop="prop"@pick="datePick"@date-change="getMonth"></ele-calendar><div v-if="isradio"><el-radio-group v-model="radio" @change="timeChange"><el-radio label="08:00-10:00" border style="margin: 8px">08:00-10:00 剩余 8</el-radio><el-radio label="10:00-11:30" border style="margin: 8px">10:00-11:30 剩余 8</el-radio><el-radio label="13:00-14:00" border style="margin: 8px">13:00-14:00 剩余 8</el-radio><el-radio label="14:00-17:30" border style="margin: 8px">14:00-17:30 剩余 8</el-radio><el-radio label="18:00-20:00" border style="margin: 8px">18:00-20:00 剩余 8</el-radio><el-radio label="20:00-12:30" border style="margin: 8px">20:00-12:30 剩余 8</el-radio><el-radio label="21:30-22:00" border style="margin: 8px">21:30-22:00 剩余 8</el-radio><el-radio label="22:00-00:00" border style="margin: 8px">22:00-00:00 剩余 8</el-radio></el-radio-group></div></div><el-inputplaceholder="請選擇日期"suffix-icon="el-icon-date"clearablereadonlyslot="reference"@focus="onInputFocus($event)"v-model="input"></el-input></el-popover></div><div></div></div> </template> <script> // 引入 import eleCalendar from 'ele-calendar' import 'ele-calendar/dist/vue-calendar.css'export default {name: 'ElementTest',data() {return {isShow: false,isradio: false,radio: '',pickdate: '',prop: 'date', // 對應日期字段名input: ''}},components: {eleCalendar},props: ['time', 'date', 'datedef'],created() {let d = new Date()this.pickdate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()},methods: {// 通過render-content的渲染Function 自定義日歷顯示內容renderContent(h, parmas) {// 自定義樣式,我返回的是小點(橘黃色)const loop = data => {return (data.defvalue.value = <div class="calendar"><div>{data.defvalue.text}</div><div style="font-size:12px" class={data.defvalue.value.class}>{data.defvalue.value.content}</div></div>)}return (<div>{loop(parmas)}</div>)},// 獲取點擊的日期 返回為標準格式 使用date.get方法獲取想要的數據datePick(date) {this.isradio = falseconsole.log(date) // Tue Mar 03 2020 00:00:00 GMT+0800 (中國標準時間)var d = new Date(date)this.pickdate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()for (let i = 0; i < this.datedef.length; i++) {console.log(this.getCurrentSimpleDate(d))console.log(this.datedef[i].date)if (this.datedef[i].date == this.getCurrentSimpleDate(d)&&this.datedef[i].content=='有號') {this.isradio = true}}},// 點擊切換月/年按鈕時返回的數據 格式為標準格式getMonth(data) {console.log(data) // Fri Apr 03 2020 00:00:00 GMT+0800 (中國標準時間)var d = new Date(data) // 點擊月console.log(d.getMonth() + 1)// d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' +// d.getSeconds() 標準時間轉化 方法},onInputFocus() {this.isShow = true},timeChange() {this.isShow = falsethis.input = this.pickdate + ' ' + this.radio},getCurrentSimpleDate(date) {var seperator1 = "-";var month = date.getMonth() + 1;var strDate = date.getDate();if (month < 10) {month = "0" + month;}if (strDate < 10) {strDate = "0" + strDate;}var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;return currentdate;}} } </script> <style> .mycalender.el-picker-panel-calendar {color: #606266;border: none;-webkit-box-shadow: none;box-shadow: none;background: #fff;border-radius: 4px;line-height: 30px; }.a1 {color: #4A4AFF }.a2 {color: #7b7b7b }/* .work-day td {height: 62px} */ .calendar {font-size: 16px;line-height: 20px; }.calendar div {height: 20px;padding-top: 10px;margin-bottom: 10px; }.el-date-table-calendar td.current {background: #ecf1f1 !important;color: #333 !important }.el-date-table-calendar td.next-month, .el-date-table-calendar td.prev-month { }.el-date-table-calendar td.next-month .a1, .el-date-table-calendar td.prev-month .a1 {color: #fff !important }.el-date-table-calendar th[data-v-7d0fa01e] {padding: 5px;padding-left: 20px;color: #606266;font-weight: 400;border-bottom: solid 1px #ebeef5; }.calendar-content {color: #4A4AFF;font-weight: bold;font-size: 16px }.el-date-table-calendar td.today {color: red !important }.el-date-table-calendar td.available:hover {color: #4A4AFF !important }.work-day td {height: calc(55vh / 7); } </style>

vue父組件中使用

<OrderData :datedef="datedef"></OrderData>datedef: [{'date': '2021-09-16', 'content': '有號', 'class': 'a1', 'cid': null},{'date': '2021-09-21', 'content': '約滿', 'class': 'a2', 'cid': null},{'date': '2021-09-20', 'content': '有號', 'class': 'a1', 'cid': null},{'date': '2021-09-23', 'content': '約滿', 'class': 'a2', 'cid': null},{'date': '2021-09-24', 'content': '有號', 'class': 'a1', 'cid': null},{'date': '2021-09-26', 'content': '約滿', 'class': 'a2', 'cid': null}]

原文地址: https://segmentfault.com/a/1190000015382208?utm_source=tag-newest
項目地址:https://github.com/xuyanming/ele-calendar

總結

以上是生活随笔為你收集整理的vue 日历插件ele-calendar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。