說明：
1.基於element-ui開發的vue日歷組件。
更新:
1.增加日期多選 :selectionMode="'dates'"，事件select返回選擇日期及節點 2.增加語言切換 :lang="'en'" 3.抽離css方便自定義樣式 import 'ele-calendar/dist/vue-calendar.css' //引入css 注釋：需要配置了jsx依賴
使用方法：
1.下載npm包:
你的VUE項目的根目錄底下運行：
npm install ele-calendar
2.引入本npm包並注冊為vue的組件：
例如：在需要使用的vue頁面中：
<!-- 里面寫eleCalendar組件-->
eleCalendar
3.通過render-content的渲染Function 自定義日歷顯示內容
例如：
renderContent(h,parmas) { //設置lunarcalendar=true,parmas返回值包含農歷
const loop = data =>{
return (
data.defvalue.value ? (
)
}
return (
{loop(parmas)}
);
},
parmas返回當前日期和傳入data對應內容
Calendar Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| data | 顯示的數據 | array | — | — |
| prop | 對應日期字段名 | string | — | — |
| lang | 語言切換 | string | en | zh-CN |
| selectionMode | 日歷模式 | string | dates | day |
| highlight | 是否要高亮對應日期 | boolean | — | false |
| currentmonth | 高亮選中日期 | boolean | — | false |
| disabledDate | 設置禁用狀態，參數為當前日期，要求返回 Boolean | Function | — | — |
| border | 是否帶有邊框 | boolean | — | false |
| lunarcalendar | 是否需要農歷 | boolean | — | false |
| defaultValue | 默認展示某月 | Date | — | - |
| render-content | 內容區的渲染 Function | Function(h, parmas) | — | — |
Calendar Events
| 事件名 | 說明 | 參數 |
|---|---|---|
| date-change | 切換日歷年、月 | data |
| select | 選擇日期的數組及節點 | val,selectDom |
| pick | 點擊日歷 | 返回當前點擊時間data、event、row、dome |
父級
<template>
<card :header="false">
<template #filter>
<Search ref="Search" :search-form="searchForm" @search="searchEvent" @getAllcalendar="getAllcalendar" />
</template>
<work-day-main ref="TableArea" :search-form="searchForm" />
</card>
</template>
<script>
// import dayJs from 'dayjs' //傳給子組件有問題
import WorkDayMain from './components/work-day/WorkDayMain'
export default {
name: 'WorkDay',
components: {
WorkDayMain,
Search: () => import('./components/work-day/Search')
},
data() {
return {
searchForm: {
intyear: String(new Date().getFullYear()) // 期間 年
}
}
},
methods: {
searchEvent(val) {
this.searchForm = val
this.$refs.TableArea.defaultValue = val.intyear + '-' + (new Date().getMonth() + 1)
this.$refs.TableArea.getAllWorkDay()
},
getAllcalendar() {
this.$refs.TableArea.getAllcalendar()
}
}
}
</script>
<style scoped>
</style>
search頁
<template>
<el-form ref="searchForm" :model="searchForm" inline class="demo-form-inline ">
<el-form-item label="期間">
<el-date-picker
v-model="searchForm.intyear"
type="year"
placeholder="請選擇"
value-format="yyyy"
@change="changeDate"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
:loading="loading"
:disabled="loading"
@click="search"
>查詢</el-button>
<el-button type="primary" @click="getAllcalendar">預置日歷</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: 'Search',
props: {
searchForm: {
type: Object,
default: () => {}
}
},
data() {
return {
loading: false
}
},
mounted() {
this.search()
},
methods: {
search() {
this.$emit('search', this.searchForm)
},
changeDate() {
this.$emit('search', this.searchForm)
},
getAllcalendar() {
this.$emit('getAllcalendar')
}
}
}
</script>
work-day-main
<template>
<!-- 里面寫eleCalendar組件-->
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
:highlight="false"
:border="true"
:default-value="defaultValue"
value-format="yyyy-MM-dd"
class="work-day"
@pick="pick"
@date-change="dateChange"
/>
</template>
<script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
import { calendar, allWorkDay, allcalendar } from '@/api/setting/work-day'
export default {
name: 'WorkDayMain',
components: {
eleCalendar
},
props: {
searchForm: {
type: Object,
default: () => {}
}
},
data() {
return {
allcalendar: [],
normalWork: '',
datedef: [
// { 'date': '2019-09-5', 'content': '班', 'cid': null },
// { 'date': '2019-09-10', 'content': '班', 'cid': null }
],
prop: 'date', // 對應日期字段名
defaultValue: ''// 默認值,搜索時賦值
}
},
created() {
// this.getAllWorkDay()
},
methods: {
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>
)
},
pick(date, event, row, dom) {
calendar({ 'strdate': date }).then(res => {
if (res.code === 20000) {
this.$message.success(res.message)
this.getAllWorkDay()
}
})
},
// 查詢全部工作日
getAllWorkDay() {
this.datedef = []
this.$parent.$parent.$refs['Search'].loading = true
const obj = {
0: '班',
1: '休'
}
this.$nextTick(() => {
allWorkDay({ 'intyear': this.searchForm.intyear }).then(res => {
this.$parent.$parent.$refs['Search'].loading = false
if (res.code === 20000) {
res.data.forEach(item => {
this.datedef.push({ 'date': item.strdate, 'content': obj[item.blnworkday], 'class': 'a' + item.blnworkday })
})
}
})
})
},
// 預置本年日歷
getAllcalendar() {
allcalendar(this.searchForm.intyear).then(res => {
if (res.code === 20000) {
this.allcalendar = res.data
this.$message.success(res.message)
}
})
},
dateChange(val) {
const year = val.split('-')[0]
if (year !== this.searchForm.intyear) {
this.searchForm.intyear = year
this.getAllWorkDay()
}
}
}
}
</script>
<style>
.work-day .a1 { color: #ff0000}
/* .work-day td {height: 62px} */
.calendar{font-size:16px;line-height:20px;}
.calendar div {height: 20px}
.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{color: #fff !important}
.el-date-table-calendar td.next-month .a1, .el-date-table-calendar td.prev-month .a1{color: #fff !important}
.calendar-content{color: #07a5a6; font-weight:bold;font-size:16px}
.el-date-table-calendar td.today{ color: #07a5a6 !important}
.el-date-table-calendar td.available:hover{color: #07a5a6 !important}
.work-day td{height: calc(55vh/7);}
</style>