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 (

                             <div style = "min-height:60px;">

                                    {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':'上班'}];

                  }

             }

        }

 

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