说明:

1.基于element-ui开发的vue日历组件。

地址

更新:

1.增加value-format指定返回值的格式
2.增加头部插槽自定义头部

<ele-calendar >
<template slot-scope="slotProps">
{{ slotProps.todo}}
</template>
</ele-calendar >
todo="{'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}"
event为切换年月是调用事件

3.增加日期多选 :selectionMode="'dates'",事件select返回选择日期及节点
4.增加语言切换 :lang="'en'"
5.抽离css方便自定义样式 import 'ele-calendar/dist/vue-calendar.css' //引入css

注释:需要配置了jsx依赖

使用方法:

1.下载npm包:
你的VUE项目的根目录底下运行:
npm install ele-calendar
2.引入本npm包并注册为vue的组件:

例如:在需要使用的vue页面中:

    <template>

        <!-- 里面写eleCalendar组件-->
<ele-calendar
:render-content="renderContent"
:data="datedef"
:prop="prop"
></ele-calendar>
</template> <script>
import eleCalendar from 'ele-calendar'
import 'ele-calendar/dist/vue-calendar.css'
export default {
data(){
return{
datedef:[
{"date":"2018-06-30","content":null,"cid":null},
{"date":"2018-06-26","content":null,"cid":null},
],
prop:'date' //对应日期字段名
}
},
components: {
eleCalendar
},
methods: {
renderContent(h,parmas) {
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
}
}
</script>
3.通过render-content的渲染Function 自定义日历显示内容

例如:

    renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历
const loop = data =>{
return (
data.defvalue.value ? (<div><div>{data.defvalue.text}</div>
<span >备选项</span>
</div>) : <div>{data.defvalue.text}</div>
)
}
return (
<div style="min-height:60px;">
{loop(parmas)}
</div>
);
},
parmas返回当前日期和传入data对应内容

Calendar Attributes

参数 说明 类型 可选值 默认值
data 显示的数据 array
prop 对应日期字段名 string
lang 语言切换 string en zh-CN
value-format 绑定值的格式。不指定则绑定值为 Date 对象 string yyyy-MM-dd
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

Scoped Slot

name 说明
自定义头的内容,参数为 {'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}

一个vue的日历组件的更多相关文章

  1. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  2. vue初学实践之路——vue简单日历组件(1)

    ---恢复内容开始--- 最近做的项目有一个需求,需要有一个日历组件供预定功能使用,之前的代码过于繁琐复杂,所以我采用vue重写了这个组件. npm.vue等等安装. 只是一个简单的日历组件,所以并不 ...

  3. Vue自定义日历组件

    今天给大家介绍Vue的日历组件,可自定义样式.日历类型及支持扩展,可自定义事件回调.Props数据传输. 线上demo效果 示例 Template: <Calendar :sundayStart ...

  4. 手把手从零开始---封装一个vue视频播放器组件

    现在,在网页上播放视频已经越来越流行,但是网上的资料鱼龙混杂,很难找到自己想要的,今天小编就自己的亲身开发体验,手把手从零开始---封装一个vue视频播放器组件. 作为一个老道的前端搬砖师,怎么可能会 ...

  5. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  6. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  7. VUE -- 如何快速的写出一个Vue的icon组件?

    伴随着Vue的诞生,它似乎就被人寄予厚望,不仅仅是因为其轻量级的MVVM设计方式,而且其实现了组件化开发模式,所以越来越多的人会拿Vue和AngularJS.React Native做比较.具体关于它 ...

  8. vue初学实践之路——vue简单日历组件(2)

    上一篇我们已经实现了基本的日历显示功能,这一次我们要加上预定的功能 废话不多说,上代码 <div id="calendar"> <!-- 年份 月份 --> ...

  9. vue自定义日历组件的实现

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalend ...

随机推荐

  1. 单源最短路 Bellman-Ford算法(有向图)

    // 单源最短路问题 // Bellman-Ford算法 // 复杂度O(V*E) //! 可以判断负圈 #include <cstdio> #include <iostream&g ...

  2. SpringCloud踩坑

    今天在使用 SpringCloud 时遇到了一个问题,感觉有不少小伙伴会遇到,所以记录下来 版本说明 SpringBoot 2.2.4.RELEASE SpringCloud Greenwich.SR ...

  3. centos 7.6 docker 安装 nextcloud -使用sqlite数据库

    docker search nextcloud docker pull docker.io/nextcloud docker images mkdir /home/nextcloud chmod -R ...

  4. spring mvc5 的 配置文件 pom.xml

    spring mvc5 的 配置文件  pom.xml <?xml version="1.0" encoding="UTF-8"?> <pro ...

  5. Dijkstra算法(Matlab实现)

    a = [,,,,,,]; % 起点节点 b = [,,,,,,]; % 终点节点 c = [,,,,,,]; % 对应权值 g = digraph(a,b,c); % 创建图 [path,dista ...

  6. .Net Core程序最终只产生1个exe

    1.用VS新建一个.Net Core 命令行程序,程序里面写什么都行,我的是这样的 2.打开程序包控制台,或者使用PowerShell等可以执行dotnet命令的工具,把你的.Net 程序发布(编译) ...

  7. C#通过文件路径获取文件名

    string fullPath = @"\WebSite1\Default.aspx"; string filename = System.IO.Path.GetFileName( ...

  8. redis缓存优化

    redis缓存优化 一.问题 在Javaweb项目中,如果每次刷新,所有资源都重新从数据库中读取,这样每次效率会很低,在这里可以使用redis非关系型数据库,将一些不经常变化得资源加载进内存中.提高效 ...

  9. hdu 1011 Starship Troopers(树上背包)

    Problem Description You, the leader of Starship Troopers, are sent to destroy a base of the bugs. Th ...

  10. 打印机打印pdf文件特别慢怎么解决

    PDF等文件中都包含了一些或者很多光栅化数据(图片.嵌入的字体等).这些文件在打印时,打印机驱动程序都会在系统中生成大量EMF文件(增强型变换文件),小到1MB,大到500MB,过大的EMF临时文件会 ...