## Calendar 日历
显示日期
![](https://img.kancloud.cn/69/90/69904889dbf6f1ea99d1e222f64d9646_2086x966.png =600x)
### 代码示例
基础用法
```html
<cvu-calendar v-model="date" height="70"></cvu-calendar>
```
自定义内容
>通过设置名为 cell 的 scoped-slot 来自定义日历单元格中显示的内容。
在 scoped-slot 可以获取到 date(当前单元格的日期),data{包括 date(完整日期)、year(年份)、month(月份)、day(天)、week(星期)、weekNumber(星期索引)、timeStamp(日期时间戳)、isToday(是否当前天)、monthType('prev':上月, 'current':当前月,'next':下月)}
![](https://img.kancloud.cn/58/6b/586b946bb3310d1717aa98926b7c67aa_2092x1114.png =600x)
```html
<cvu-calendar>
<template slot="cell" slot-scope="{date, data}">
<div style="font-size: 12px;">日期:{{ date }}</div>
<div style="font-size: 12px;">星期:{{ data.week }}</div>
</template>
</cvu-calendar>
```
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 绑定值 | Date/string/number | - |
| height | 日历单元格高度 | Number/String | 100 |
| border | 是否显示边框 | Boolean | true |
| show-calendar-type | 是否显示年月日历类型切换开关 | Boolean | true |
| show-month-type | 是否显示(上月/当月/下月)类型切换开关 | Boolean | true |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器