首先去官网下载我们所需要的日历插件http://ext.dcloud.net.cn/plugin?id=56

选择下载插件ZIP，然后我们将解压出来的文件放到项目的components里面，在所需要的页面进行引入，注册组件，然后使用

<view class="top-main">
      <view class="signIn-btn" @click="handelSign">点击签到</view>
    </view>
    <calendar
      :date="date"
      :selected="selected" //打点功能
      :disable-before="true"
      :start-date="'2019-3-2'"
      :end-date="'2019-5-20'"
      class="calendar_box"
      @change="change"
      @to-click="toClick"
    />

import calendar from "../../components/uni-calendar/uni-calendar.vue";

@Component({
  components: {
    calendar,
  },
})

 date: any = "2020-08-13"; //初始日期
  selected= [ //打点日期，实际开发中，这里需要请求后端接口，拿取数据后在进行渲染
    {
      date: "2020-8-13"
    },
    {
      date: "2020-8-20"
    },
    {
      date: "2020-8-1"
    },
    {
      date: "2020-8-3"
    }
  ];

  /* 点击签到 */
  handelSign(){
    var date = new Date().toISOString().slice(0, 10);//签到功能获取当前时间并格式化
    console.log(date) //当我们这里点击签到后就可以将当前日期参数返回给后端，存入表中
  }
  change(e: any) {
    console.log(e);
  }

  toClick(e: any) {
    console.log(e);
  }
}

然后这个插件运行成功后是这个样子

这跟我的设计图还是有点出入，我们只需要去uni-calendar-item.vue这个文件里头去找对应的class进行修改就可

这个日历的样式是通过动态class去判断，该日期是否为当前日期，该日期是否为打点日期，是否非本月日期等等，如果你有其他需求，可以打印这个weeks参数，就可以找出区分的一些属性值，然后结合在一起判断即可