048_Calendar日历

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