vue如何实现类似小日常app那样的打卡日历？

Question

如图所示，点击可以打卡，然后标记当前日期

再次点击取消本次打卡（同时取消标记）

日历可以切换上下月份

想要实现这种效果要如何写代码呢？

Answer 1

可以找下看有没有这方面的组件、如果没有这个日历也不复杂的，日历基础的展示都有现成的代码，然后就是通过属性来控制样式、

Answer 2

第一步：先实现日历功能。写出日历的页面，实现日历可以上下翻页，看前后月份。这个挺简单的。

第二步：日历实现的基础上，实现样式，点击选中和取消的样式。这个也很简单。

第三步：在每个月份的日期上添加点击事件，每个日期都需要设置一个是否选中的值，你可以放在class里也可以放id上也可以单独命名一个属性放在html上，在点击的时候，获取到这个值，进行判断是否选中，做相应的操作。

第四步：在点击事件中取到了是否选中的状态之后，写打卡的相关逻辑，打卡状态是存在本地还是服务器。这块也很简单。

第五步：考虑是单独放在一个页面上还是做成可以服用的插件，优化代码。

以上五步一般是我写东西的时候的正常流程。页面html，css ---> 逻辑 ---> 封装/优化