1. Calendar日歷

1.1. Calendar日歷顯示日期。

1.2. Attributes

參數	說明	類型	可選值	默認值
value / v-model	綁定值	Date/string/number	無	無
range	時間范圍, 包括開始時間與結束時間。開始時間必須是周一, 結束時間必須是周日, 且時間跨度不能超過兩個月。	Array	無	無
first-day-of-week	周起始日	Number	1 到 7	1

1.2. dateCell scoped slot參數

參數	說明	類型	可選值	默認值
date	單元格代表的日期	Date	無	無
data	{ type, isSelected, day}, type表示該日期的所屬月份, 可選值有prev-month, current-month, next-month; isSelected標明該日期是否被選中; day是格式化的日期, 格式為yyyy-MM-dd	Object	無	無

2. Calendar日歷例子

2.1. 使用腳手架新建一個名為element-ui-calendar折疊面板的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Calendar from '../components/Calendar.vue' import MyselfCalendar from '../components/MyselfCalendar.vue' import RangeCalendar from '../components/RangeCalendar.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Calendar' },{ path: '/Calendar', component: Calendar },{ path: '/MyselfCalendar', component: MyselfCalendar },{ path: '/RangeCalendar', component: RangeCalendar } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Calendar.vue

<template><div><h1>基本</h1><h4>設置value來指定當前顯示的月份。如果value未指定, 則顯示當月。value支持v-model雙向綁定。</h4><el-calendar v-model="value"></el-calendar></div> </template><script> export default {data () {return {value: new Date()}} } </script>

2.4. 在components下創建MyselfCalendar.vue

<template><div><h1>自定義內容</h1><h4>通過設置名為dateCell的scoped-slot來自定義日歷單元格中顯示的內容。在scoped-slot可以獲取到date(當前單元格的日期), data(包括type, isSelected, day屬性)。</h4><el-calendar><!-- 這里使用的是2.5 slot語法, 對于新項目請使用2.6 slot語法--><template slot="dateCell" slot-scope="{date, data}"><p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '??' : ''}}</p></template></el-calendar></div> </template><style scoped>.is-selected {color: #1989FA;} </style>

2.5. 在components下創建RangeCalendar.vue

<template><div><h1>自定義范圍</h1><h4>設置range屬性指定日歷的顯示范圍。開始時間必須是周起始日, 結束時間必須是周結束日, 且時間跨度不能超過兩個月。</h4><el-calendar :range="['2019-03-04', '2019-03-24']"></el-calendar></div> </template>

2.6. 運行項目, 訪問http://localhost:8080/#/Calendar

2.7. 運行項目, 訪問http://localhost:8080/#/MyselfCalendar

2.8. 運行項目, 訪問http://localhost:8080/#/RangeCalendar

總結

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

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