ele-calendar 组件的使用

最近项目中需要使用日历，并且是可以展示标注的，因为基于 Element UI，所以多方查找后使用了 ele-calendar 组件，话不多说，直接上代码：

1、全局安装：npm install ele-calendar

2、文件中使用：

<ele-calendar

:render-content="renderContent"

:data="datedef"

:prop="prop"

@pick="datePick">

</ele-calendar>

import eleCalendar from 'ele-calendar'

import 'ele-calendar/dist/vue-calendar.css'

import _ from 'lodash'

import moment from 'moment'

export default {

data() {

return {

datedef: [

{'date': "2019-08-01", 'content': 'aa', "cid": null},

{'date': "2019-08-15", 'content': 'bb', "cid": null},

prop: 'date' //对应日期字段名

}

components: {

eleCalendar

methods: {

renderContent(h, {defdate, ...parmas}) {

//把时间转成时间戳

var imoment = moment(defdate);

//把时间进行格式化

let geshi = imoment.format('YYYY-MM-DD');

//拿到时间所对应的星期

let week = imoment.day();

//用日期对比数组中的元素，如果存在就返回对象，如果不存在就返回空

let info = _.find(this.datedef, {'date': geshi});

return (

{imoment.date()}

<br/>

{info? info.content : ''}

</div>

);

datePick(date, event, row, dome) {

let imoment = moment(date);

let iformat = imoment.format("YYYY-MM-DD");

let week = imoment.day();

// 在数组里面查找是否有点击的那一项

let info = _.find(this.datedef, {'date': iformat});

// info如果存在，就在数组中找到，并且修改属性，如果不存在，在数组加入点击日期对应的对象

this.datedef =info?_.map(this.datedef,iobject=>info==iobject?{...iobject,'content':iobject.content=='休息'?'上班':'休息'}:iobject):[...this.datedef,{'date':iformat,'content':'上班'}];

}

经测试可以正常运行，如出错请评论联系我，不足之处，多多指教！！

ele-calendar 组件的使用相关推荐

vue关于element日历calendar组件上月、今天、下月、日历块点击事件
vue关于element日历calendar组件上月.今天.下月.日历块点击事件参考 https://blog.csdn.net/qq493820798/article/details/106858 ...
vue学习之关于element日历calendar组件中上月，今天，下月的显示
今天学习写日历的模板,不过element日历组件官方文档提供的资料较少,所以试着写了个简单的,以后再深入学习. 显示效果图: 本月: 上月: 下月: 下方是源码 <template> &l ...
饿了么 (Element)的日历(Calendar)组件自定义
笔记由于本人用vue+elementui 写了一个关于日历的项目需求是每个日期对应不同的价格并且点击两次之后取其区间的值并计算出总价后来翻了很多资料才找到一些思路 (由于在饿了么ui的日历组件库 ...
Vue.js（19）之封装calendar组件
效果需求 1.实现一个日历组件,如图: 2.显示某天的事项: 3.事项是模拟父组件请求接口返回的,数据格式如下: [{id: '232',date: '2019-06-01',info: '我要去吃 ...
【vue】Element Calendar 组件显示农历及节日
效果图: 1.下载calendar.js https://github.com/jjonline/calendar.js 2.将下载好的calendar.js放到utils文件夹下,calendar. ...
vue vant Calendar组件日历开始时间结束时间的范围控制时间戳标准时间转换获得月份的最后一天
功能: 开始时间范围选择: 最小时间:去年的今天最大时间:当前时间结束时间范围选择: 最小时间:开始时间最大时间: 开始时间月份的最后一天比如:当前时间2021-07-24,开始时间选择范围就 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
vue-element日历calendar组件个性化改造（备忘录圆点、点击事件）
需求如图,总结如下 1.根据后台返回的数据,判断有备忘录的给出标注,memoLevel为紧急程度 1为紧急(红色),2一般(蓝色),3不重要(绿色),显示小圆点, 2.如果同一天出现很多条备忘录,根据 ...
element-ui组件库中Calendar日历组件使用心得（可能用到的常用方法和如何添加监听）
最近接触到一个需求,做一个值班排班表,拿到低保真之后一直在考虑是如何实现这个排班表,考虑过自己写,也考虑过@fullcalendar/vue插件,经过一些评估之后最终选择了项目本身使用的element ...
ant日历组件calendar转中文以及消息渲染
1.背景目前使用的项目用的是ice+ant+react ,项目中使用了calendar组件,但是组件中的星期,年份,月份都是英文的,按照官网的配置了转中文没有起作用. 转换后的效果: 2.手动转换 ...

ele-calendar 组件的使用

ele-calendar 组件的使用相关推荐

最新文章

热门文章