开发那点事(四)vue实现一个日历插件

开发背景
产品给开发这个流程图
开发那点事(四)vue实现一个日历插件_第1张图片
找了两天插件,最后产品还是不满意,自己着手开始实现了,
最终效果

整体思路
1 确定日期json数组
2 根据数组渲染到页面上
3 根据不同的status应用不同的css
4 根据不同的状态做出判断
开发细节
1 json数组的格式如下

 {
            year: 2019,//年
            month: '02',//月
            dayArray: [
              {
                day: '01', //表示月份中的天
                status: 0 //  0 正常状态 1最右边 2 最左边  3 开始时间 4 结束时间  5正常选中
              }
            ]
          }

要用到了一个函数根据年月获取月份中的天数

//根据年月获取天数
function getDate(year, month){
  let d = new Date(year, month, 0);
  return d.getDate();
}

2 数组渲染至页面

 

你可能感兴趣的:(开发那点事,vue,日历插件,移动开发)