vue-fullcalendar做一个日历

​​​​​​引用git:vue-fullcalendarhttps://github.com/Wanderxx/vue-fullcalendar

项目要做一个日历,在每天展示事件,不同类别的事件样式不一,点击事件弹窗查看详情,弹窗内点击穿透等功能

由于项目本身比较久远,也不能贸然升级版本,没法用element-ui 的日历插件,于是找到了以上方法,其中参考了https://www.jianshu.com/p/3e652dc44633

这篇文章做一些补充

如果后台给出的数据和这个组件设定的不一样,需要把它下载到本地修改,此处有许多报错需要处理

!!vue-style-loader!css-loader?

这个报错是样式问题

解决办法

npm install sass sass-loader --save-dev  

但是 sass-loader也会报错,因为代码太老了,不能用最新的sass-loader 

npm install [email protected] --save-dev 降低版本号

另外还需要安装moment

npm install moment

(Emitted value instead of an instance of Error) the "scope"  

此处将 fullcalendar.vue 中  scope 改成 slot-scope

改完之后还会报错

Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#

这里是因为webpack 2中不允许混用 import 和 module.exports

在 dateFunc.js 文件中 将 module.exports = dateFunc; 改成  export default dateFunc;

另外,将日历设置成中文,引用时设置 locale="zh-cn" 

设置lang='cn'没有用,因为这组件用的是moment的中文设置,虽然git里面有一个配置语言的文件,但是压根没有引用

vue-fullcalendar做一个日历_第1张图片

 

你可能感兴趣的:(趟过的坑,vue.js,webpack,前端)